Website Sections and UI Elements Explained (Complete Guide)

There's a specific kind of frustration that shows up early when you're building with an AI tool.

You know exactly what you want. You can see it. But you end up typing something like "put a thing at the top with the big words and a button", and what comes back is nearly right in an unhelpful way — right idea, wrong shape, and now you're two rounds deep in a conversation you should have won in one.

The problem isn't your idea. It's that the thing you're describing already has a name, and you don't know it yet.

Websites and apps are built from a surprisingly small set of parts. Once you know what they're called, you stop describing and start naming — and naming is dramatically faster. "Add a hero with a headline, subheadline and a primary button" takes eight seconds and lands first time.

This is the dictionary. It's long, and it's meant to be. Don't read it end to end — use the outline to jump to whatever you need, and come back when you're stuck for a word.

Sections, elements, and the split that matters

Sections are the big horizontal bands that stack down a page. A hero, a pricing table, a footer. If you scroll a landing page, you're passing through sections.

Elements are the individual pieces sections are made from. A button, an input field, a card. A section is a room; an element is the furniture. Both worth knowing.

There's also a split that runs through everything below, and it matters more than people expect. Marketing vocabulary covers the parts of a public-facing website designed to persuade. App vocabulary covers the parts of a tool designed to get work done. They barely overlap. If you're building an internal tool, most of the marketing list is irrelevant to you, and the reverse is just as true.

Marketing page sections

The bands you stack to make a public-facing page, roughly in the order they usually appear.

Section	What it is
Announcement bar	A thin strip above everything, carrying one message: a launch, a sale, a notice. Usually dismissible.
Navigation bar	The strip across the top with your logo and main links. A sticky nav stays visible as you scroll; a mega menu drops down a large panel of grouped links; a hamburger menu is the three-line icon that opens the menu on mobile.
Hero	The first thing you see. Big headline, a supporting line, usually a button and an image. Its job is one sentence: say what this is and give one thing to click. Split hero puts text one side and image the other; centred hero runs everything down the middle; animated hero moves, which looks impressive and adds loading time.
Logo cloud	A row of customer logos, usually just below the hero. Only works if the logos mean something to the visitor; a row of unrecognisable ones is worse than nothing.
Features section	What the thing does, usually three or four items with an icon, a title and a line of text. Laid out as a grid of equal boxes, or as alternating rows with the image switching sides.
Bento grid	A newer pattern: uneven boxes of different sizes tiled together, like a bento box. Shows several features with visual variety.
How it works	Numbered steps, three or four, in order. Useful whenever what you're offering isn't instantly obvious.
Stats band	A row of big numbers with short labels. "10,000 users. 99.9% uptime. 4 minutes to set up."
Testimonials	Quotes with a name, photo and company. Sometimes in a carousel, though a static grid usually performs better because nobody waits for a carousel to cycle.
Case study	A longer testimonial: one customer, the problem, what changed.
Pricing table	Columns, one per plan, each with a price, an inclusion list and a button. Usually one column is highlighted as recommended. Often paired with a billing toggle for monthly versus yearly.
Comparison table	Rows of features, columns of options, ticks and crosses. Either you versus competitors, or plan versus plan.
FAQ	Questions with answers, usually collapsed. The collapsible pattern is called an accordion: click a question, the answer expands, the others stay shut.
Team section	Photos, names and roles. Common on about pages and for service businesses where the people are the product.
Blog listing	A grid or list of article cards with title, excerpt, date and image.
Newsletter signup	An email field and a button, often inside a coloured band.
Contact section	A form, contact details, or both. Sometimes with an embedded map.
Call to action	A band near the bottom asking for one specific thing: sign up, book a call, get in touch. CTA also refers to the individual button; context tells you which is meant.
Footer	The bottom strip: links, legal pages, contact details, social icons. Nobody's favourite section, and where people go when they can't find something anywhere else.
Cookie consent banner	The overlay asking about tracking. Legally required in the EU if you use analytics or marketing cookies, and worth building deliberately rather than bolting on later.

App screens

The equivalent list for a tool rather than a website.

Screen	What it is
App shell	The persistent frame around everything: sidebar, top bar, content area. Doesn't change as you navigate.
Dashboard	The landing screen after logging in. Usually stat cards across the top, a chart or two, and a recent activity list.
Index / list screen	The main list of whatever the app is about: projects, invoices, requests. Almost always a data table with filters and search.
Detail screen	One record, in full. Often a description list of its fields, plus related items and actions.
Master-detail	List on one side, the selected item's detail on the other. Email clients, CRMs, anything with many records.
Form screen	Create or edit one thing. The most common screen in any internal tool.
Settings	Grouped preferences, usually with tabs or a secondary sidebar.
Profile / account	The user's own details, password, notification preferences.
Onboarding flow	The first-run sequence: a few steps getting someone from empty to useful.
Kanban board	Columns of draggable cards. The standard for anything with stages: pipelines, requests, tasks.
Calendar view	The month or week grid. Not the same as a date picker; this one displays things rather than collecting a date.
Inbox / notification centre	A list of things needing attention, usually behind a bell icon with a count.

Buttons and clickable things

Element	What it is
Button — primary	The main action. Solid, high contrast. Ideally one per screen.
Button — secondary	The alternative. Outlined or muted.
Button — tertiary / ghost	Looks like plain text until you hover.
Button — destructive	Red. Delete, remove, cancel a subscription.
Link	Takes you somewhere. Underlined or coloured text.
Icon button	Just an icon, no text. Fine for universally understood actions like close or search. Risky for anything else, because icons are far less obvious than people assume.
Split button	A main action plus a small arrow revealing related options.
Button group	Several buttons joined into one strip.
Floating action button	A round button hovering in a corner, usually bottom right. Common on mobile.
Dropdown menu	Click a button, a list of actions appears.
Context menu	The menu that appears on right-click.
Popconfirm	A small "are you sure?" bubble appearing on the button itself. Lighter than a modal, good for deletes.
Copy button	Copies text to the clipboard and confirms it did. Small, and disproportionately appreciated.

Form inputs — text and numbers

Input	What it is
Text input	A single-line box. The most common field there is.
Textarea	Multi-line, for messages and descriptions.
Number input	With increment and decrement arrows.
Password input	Masked, usually with a show/hide toggle.
PIN / OTP input	The row of single-character boxes for verification codes.
Search input	A text field with a magnifying glass. Deserves its own name because people look for it specifically.
Rich text editor	Bold, italic, lists, links. Sometimes called a WYSIWYG editor.
Mentions	Type @ inside a field and pick a person from a list.
Masked input	Enforces a format as you type: phone numbers, card numbers, VAT numbers.

Form inputs — choosing from options

Input	What it is
Select / dropdown	Click, a list appears, pick one.
Multiselect	Pick several; each choice becomes a removable tag inside the field.
Combobox	A dropdown you can also type into to filter. Better than a plain dropdown once the list passes about ten options.
Autocomplete	You type, it suggests. Similar to a combobox, but the suggestions come from what you've typed rather than a fixed list.
Checkbox	Square, on or off. Several can be selected at once.
Radio button	Round, pick exactly one from a set. The rule: checkboxes for many, radios for one.
Toggle / switch	The sliding on-off control. Use it when the change applies immediately; use a checkbox when it applies on save.
Segmented control	A joined strip of two to four options, one selected. Looks like tabs but chooses a value rather than switching a panel.
Cascader	A multi-level dropdown where each choice reveals the next. Country, region, city.
Tree select	Pick from an expandable hierarchy.
Transfer list	Two panels side by side; move items between available and selected.
Tag input	Type a word, press enter, it becomes a removable chip.

Form inputs — dates, files and everything else

Input	What it is
Slider	Drag along a range. Good for imprecise values.
Range slider	Two handles, a minimum and a maximum.
Rating	Stars, usually five.
Date picker	A small calendar. Notoriously fiddly to build well, which is why nobody builds one from scratch.
Date range picker	Two dates, a start and an end.
Time picker	Hours and minutes.
Colour picker	A swatch opening a palette or spectrum.
File upload	A button, or a drop zone you drag files onto. Should show progress and let people remove a file before submitting.

Form structure

This is the part beginners skip. The inputs are the easy half; what surrounds them is what makes a form usable.

Part	What it does
Label	The text above or beside the field. Always have one. Placeholder text is not a label; it disappears the moment someone types.
Placeholder	The grey example text inside an empty field. Use it for format hints, never for the label itself.
Helper text	A line under the field explaining what's wanted. "We'll only use this to send your receipt."
Required indicator	Usually a red asterisk. Mark either the required fields or the optional ones, consistently. Don't mix.
Validation message	The red line under a field when something's wrong. Say what's wrong and how to fix it: "Password needs at least 8 characters", not "Invalid".
Inline versus on-submit validation	Checking as they type, versus checking when they press the button. Inline is friendlier for format problems; on-submit is fine for everything else.
Field group	Related fields boxed or headed together. "Billing address" as one group.
Form actions	Where submit and cancel live. Bottom right is conventional. Make the primary action obvious and the destructive one not.
Multi-step form	A long form broken into steps with a progress indicator.
Autosave indicator	"Saving…" then "Saved", for forms with no submit button.
Unsaved changes warning	The prompt when someone navigates away mid-edit. Small feature, prevents real anger.

Content containers

Container	What it is
Card	A bounded box holding a chunk of related content. The single most useful element in app building. A product, a person, a project, a stat: anything discrete becomes a card.
Panel	Like a card, but for grouping controls or content within a page rather than representing a thing.
Grid	Cards laid out in rows and columns.
Masonry	A grid where items have uneven heights and tile together. Good for images, awkward for anything you need to compare.
List	Items stacked vertically. Denser than a grid, better when scanning matters more than looking.
Accordion / collapse	Collapsible sections, one topic each.
Tabs	Several panels in one space, switched by clicking labels along the top.
Carousel	Content sliding horizontally, one at a time. Looks nice, gets ignored. Use with care.
Splitter	Two areas with a draggable divider between them.
Scroll area	A bounded box with its own scrollbar.
Divider	A horizontal line separating things. Sounds trivial, does a lot of work.
Lightbox	Click a thumbnail, it opens large.
Aspect ratio box	Reserves the right shape for an image so the page doesn't jump while it loads.

Data display

The heart of any internal tool, and the area most beginners underestimate.

Element	What it is
Table	Rows and columns with headers. Underrated in a world obsessed with cards. If people need to compare or sort values, use a table.
Data table	The grown-up version, and what you almost always actually want. Sortable columns, column filters, row selection with bulk actions, pagination or infinite scroll, a sticky header, row actions, expandable rows, column visibility, and CSV export.
Statistic / KPI card	One big number, a label, often a trend arrow and a comparison. "€42,300 — up 12% on last month."
Description list	Key and value pairs showing one record's fields. "Status: Approved. Submitted: 4 June. Owner: Ana."
Timeline / activity feed	Chronological events with timestamps. "Ana approved invoice 3461 — 11:34."
Tree	An expandable hierarchy. Folders, categories, org charts.
Comment thread	Comments with authors, timestamps and replies.
Avatar group	Overlapping profile pictures with a "+3" at the end.

Worth saying explicitly when prompting

"Make it a sortable, filterable data table with pagination and row selection." One sentence, enormous difference.

Charts

Worth knowing the vocabulary so you can ask for the right one.

Chart	When to use it
Bar chart	Comparing categories.
Line chart	Change over time.
Area chart	A line with the space beneath it filled.
Pie / donut	Parts of a whole. Only readable with a handful of slices.
Sparkline	A tiny line chart inside a card, no axes.

Overlays

Things that appear over the page.

Overlay	What it is
Modal / dialog	A box opening over everything, dimming the background, blocking interaction until dealt with. Use for genuinely important decisions, not for everything.
Confirmation dialog	The "are you sure?" modal. Name the consequence: "Delete 4 invoices? This can't be undone."
Drawer / sheet	Like a modal but sliding in from an edge. Common on mobile, and good for editing a record without leaving the list.
Popover	A small panel appearing next to what you clicked. Good for a menu or a bit of extra detail.
Tooltip	A tiny label appearing on hover, explaining an icon or truncated text. Never put anything essential in one; they don't exist on touchscreens.
Hover card	A richer tooltip: a preview card when you hover a name or link.
Command palette	The Ctrl+K overlay combining search and actions. Now standard in serious tools, and beloved by anyone who uses one daily.
Product tour	The guided sequence of highlighted spots for first-time users.
Toast / snackbar	A small message sliding in, usually in a corner, then disappearing. "Saved." "Something went wrong."
Banner / alert	A wide strip carrying an important message. Unlike a toast, it stays until dismissed.
Notification centre	The bell with a count, opening a persistent list. Different from a toast: toasts vanish, notifications wait.

Status and feedback

Element	What it is
Badge / pill / tag	A small rounded label. Status, category, count.
Status indicator	A coloured dot with a word. Active, pending, failed.
Progress bar	How far through something you are.
Circular progress	The same thing as a ring, usually with a percentage in the middle.
Spinner / loader	The spinning circle. Something is happening.
Skeleton	Grey placeholder blocks in the shape of the content that's coming. Feels faster than a spinner, because the page looks like it's already arriving.
Avatar	A small circular profile picture, falling back to initials.
Tooltip on a disabled button	Explaining why it's disabled. A small thing that prevents a lot of confusion.

Navigation

Element	What it is
Sidebar	The vertical navigation column, standard for apps. Often collapsible to icons only.
Top nav	Horizontal navigation, standard for marketing sites.
Breadcrumbs	The trail showing where you are: Home, Projects, Website redesign.
Tabs	Switching between views of the same thing.
Pagination	Page numbers at the bottom of a long list.
Infinite scroll	New items load as you scroll. Good for feeds, bad for anything where people need to reach the footer.
Stepper / wizard	A multi-step process showing which step you're on.
Anchor links	Jump links to sections of a long page, often sticky down one side.
Back to top	The button appearing once you've scrolled far.
Filter and sort controls	The panel that narrows a long list. Any list past about fifty items needs these more than it needs a nicer layout.
Global search	Searching across everything, not just the current page.

Layout patterns

Pattern	When to use it
Grid	Equal boxes in rows and columns. Dashboards, listings, galleries.
Split screen	The page divided in two, often text and a visual.
Sidebar layout	Narrow navigation column, wide content area. The standard for apps.
Single column	Everything down the middle, one thing at a time. Best for reading.
Long scroll	Sections stacking down one page. The standard landing page shape.
Master-detail	List one side, detail the other.

Spacing vocabulary

These are the words that fix "it looks cramped".

Word	What it means
Container	A maximum width with centred content, so text doesn't stretch across a huge monitor.
Stack	Items spaced evenly, vertically.
Group	Items spaced evenly, horizontally.
Gap	The space between items in a grid or stack.
Padding	Space inside an element's edges.
Margin	Space outside an element.
Responsive	The layout adapting to screen size. Not a layout itself, but the word to use when asking for one that works on phones.

The states every screen has

The part beginners skip and then rediscover painfully. Every screen showing data has several states, and the tool will usually only build one unless you ask.

State	What to show
Loading	Data is on its way. Show a skeleton or a spinner, never a blank page.
Empty	There's genuinely nothing yet. Show a short message and one clear action: "No projects yet — create your first one."
No results	Different from empty. There is data, but the current search or filter matched none of it. Offer a way to clear the filters.
Error	Something failed. Say what happened in plain words and what to do about it. Never show a raw error code.
Success	The confirmation after an action. Brief, and it should actually confirm what happened.
Disabled	The control exists but can't be used right now. Explain why.
Offline	The connection dropped. Say so rather than freezing.

A useful habit when prompting

After any screen that loads data, add: "handle the loading, empty, no-results and error states too." One sentence, four problems solved.

Screens people forget to build

Every one of these gets discovered late, usually the day before you show someone.

Sign in. Sign up. Forgot password and reset password. Verify email or enter code. 404 page not found. 500 something broke. 403 you don't have access to this. Maintenance page. Onboarding — the first screen after signing up, when there's no data yet. Account settings. Notification preferences. Terms, privacy policy and cookie policy, required if you collect anything. And delete my account, which is a legal requirement under GDPR and the one everybody forgets.

Which of these actually matter for you

A caution, because component catalogues are full of beautiful things you don't need.

Roughly half of what's published online is marketing surface: animated heroes, gradients, shaders, decorative backgrounds. Genuinely impressive, and almost entirely irrelevant if you're building an internal tool for nine colleagues.

If you're building	The vocabulary you need
A landing page	Nav, hero, features, social proof, testimonials, pricing, FAQ, CTA, footer, cookie banner.
An internal tool	Sidebar, data table, filters, search, form inputs, labels and validation, modal, drawer, toast, empty state, badge, stat card, chart.

Nothing on the second list is exciting. All of it is what people use every day.

The mistake worth avoiding is spending an afternoon on an animated background for an expense tracker. The people using it need the table to sort properly. They will never once mention the background.

How to actually use this

Three habits that turn a vocabulary list into faster building.

Name it instead of describing it. "Add a modal with two inputs and a primary button" beats "make a popup box thing where they type stuff."

Say the layout as well as the content. "Show the projects as cards in a three-column grid" is one round. "Show the projects" is three.

Borrow rather than invent. Public component catalogues let you copy a ready-made piece as a prompt and paste it straight into your builder. Starting from something that already looks good beats describing good from scratch, and it's how most people reach a polished result quickly.

The short version

Every website and app is made of the same parts, and they all have names. Sections stack down the page; elements fill the sections; forms need labels and validation as much as they need inputs; tables need sorting and filtering as much as they need rows; and every screen needs an answer for loading, empty and broken. You don't need to memorise any of it. You just need to know it exists, so that next time you're describing "the thing at the top with the big words", you can call it a hero and move on.

Related lessons

Website Sections and UI Elements Explained