A field guide for humans who use websites

What are the parts of a website called?

You've seen a thousand heroes, carousels, pop-ups and hamburger menus — you just didn't know their names. This page is a real, working website where every part wears a name tag. Turn them on, hover anything, and this page will explain itself.

Start the tour

No sign-up, no jargon, no frameworks — every example on this page is the real thing.

How this guide works

One button turns every part into an exhibit

Press Show name tags in the menu above. Every part of the page gets a small label and a dashed outline — hover or tap any of them for its museum-style card: what it is, where you've seen it, and why it exists. Press the button again and the page goes back to normal.

Try it now

Press Show name tags in the menu above, then hover this very box. The pattern scales to hundreds of parts without ever cluttering the page — because it's off by default.

Part 1 — The frame

The skeleton every page is built on

These four parts appear on almost every website on earth. The menu bar, the welcome area, the trail of where you are, and the sign-off at the bottom — you're looking at all of them right now.

Live example

The real menu is the bar at the very top of your screen — scroll down and watch it stay put. Shrink the window (or use a phone) and watch the links fold up into the hamburger.

Live example

Wherever you are on a big site, breadcrumbs answer the question: "how did I get here, and how do I go up one level?"

Live example

Keep scrolling — the real footer of this very page is the demo: three columns that collapse neatly on a phone, plus the legal line at the bottom.

Part 2 — The content

How information is laid out

Websites reuse the same handful of layouts everywhere. Once you can name them, you'll start spotting them on every site you visit.

Live example — hover a card

The headline

Also called a heading. Pages use different heading sizes like book chapters and sub-chapters.

you're reading one now

The grid

An invisible set of rows and columns that designers use to keep everything lined up.

invisible but everywhere

The paragraph

Plain blocks of text like this one. Readability rules: short lines, comfortable spacing.

the workhorse

The timestamp

"Posted 2 hours ago". Dates and times that tell you how fresh the content is.

age matters

The price tag

Numbers styled to stand out. Shops make prices bold; dashboards make KPIs huge.

emphasis by style

The caption

The small text under an image or diagram explaining what it shows — like in a museum.

small but helpful

Live example — swipe it, arrow it, or dot it

the frame

the content

the controls

the polish

Live example — the icon set used on this very page

home

bell

user

settings

heart

Live example — press the bell

notification badge

New a chip / tag

Sale −30% another chip

avatar + green "online" dot

Part 3 — The controls

How you talk back to a page

Buttons, forms, menus and pop-ups — every way a website listens to you and answers. Everything below is live. Click with abandon.

Live example — click them, then press Tab to walk through with your keyboard

Live example — try a wrong email, then a right one

Live example — open it, then click elsewhere

Live example

A genuine pop-up — focus trap, dimmed backdrop, Escape to leave:

Live example — hover or tab to the word

A tooltip is like a museum placard for a single word: small, nearby, and gone when you move on.

Live example — the FAQ you're about to read is one

People use the words loosely. Technically, a modal is the polite kind of pop-up: the rest of the page waits until you answer it. Rude pop-ups (new browser windows, ads that follow you) are the other kind.

Live example — switch between the tabs

The overview is the first thing people read — so it's written last, once the details are settled. One idea, plainly stated.

Live example — click the numbers

Part 4 — The polish

The things you feel but never notice

Motion and waiting states. When they're done well, you never consciously see them — you just feel that a page is quality. And if your device asks for less motion, this page listens and everything stands still.

Live examples

spinner — "please wait"

ripple — confirms your click

hover — "I'm clickable"

pulse — "look at me"

stagger — bars wave in turn

Live example — this is what "loading" looks like on a modern site

Imagine each grey shape replaced by a photo, a heading and two sentences — and you understand exactly why designers choose these shapes.

Live example

Part 5 — The extras

The invisible details

Small things every website has, which you notice only when they're missing or wrong.

Live example — check your browser tab right now

16px — tab size

64px — 4x zoom

<link rel="icon" href="favicon.svg">

Live examples

The scrollbar you're using right now is custom. The bar below mimics the real progress bar at the top of this page:

Live example

Click somewhere neutral, then press Tab. The first thing to appear (top-left corner) is this site's skip link. Most sites have one; most people never see it.