Anatomy of a Website
Most web pages share the same regional skeleton (header, navigation, main content, sidebar, and footer) regardless of framework or styling.
File extensions: .html
Every part of the example below is labelled and explained. This page is one of 55 annotated tours on AnatomyOf, a free, open-source project by LunarWerx Studios.
What is inside a Website page
Header
The bar across the top that identifies the site and holds navigation.
The header is the introductory region at the top of the page, marked up with the <header> landmark. It usually persists across pages and contains the logo, primary navigation, and sometimes a search box or account menu. Because it is a landmark, assistive technology lets users jump straight to it. A page can have more than one <header> (e.g. inside an <article>), but the top-level one describes the whole site.
Brand / logo
The site name or logo, usually linking back to the home page.
The brand mark anchors the header and doubles as the "home" link, a near-universal convention users rely on. It is typically an <a> wrapping a logo image or the site name. Keep it in the same spot on every page so it stays a dependable escape hatch back to the top level. If it is an image, give it descriptive alt text (usually the company name).
Primary navigation
The main set of links to the site’s top-level sections.
Primary navigation lives in a <nav> landmark and lists the handful of most important destinations. Marking it up as a list of links makes the structure clear to screen readers and keyboards. Highlight the current section so users know where they are, and keep the set small. A long primary nav usually signals that the information architecture needs grouping.
Hero section
The large banner up top that states what the site is about.
The hero is the first thing visitors see: a headline, a short supporting line, and usually a primary action. Its job is to answer "what is this and why should I care?" within seconds. It is typically a <section> with a prominent heading. Resist stuffing it with detail: clarity and a single clear next step convert better than a wall of text.
Call to action
The primary button that drives the main conversion.
A call-to-action (CTA) is the button or link you most want the visitor to click: "Get started", "Sign up", "Buy now". It should stand out visually and use an action verb. Most pages have one primary CTA and demote everything else to secondary styling, so attention is not split. Repeating the same CTA in the hero and again lower down is common and effective.
Main content
The unique, primary content of this particular page.
The <main> landmark wraps the content that is unique to the page: not the header, nav, or footer that repeat across the site. There should be exactly one <main> per page. It is the target of a "skip to content" link and a key landmark for assistive tech, letting users bypass the repeated chrome and get straight to what they came for.
Article / content block
A self-contained piece of content, like a post or card.
An <article> is a self-contained composition that would make sense on its own: a blog post, a product card, a comment. The test: could you syndicate it elsewhere and it still reads completely? Use <section> instead when the block is a thematic grouping within a larger whole rather than an independent unit. Each should generally start with a heading.
Sidebar (aside)
Secondary content tangential to the main content.
The <aside> landmark holds content related to but separable from the main flow: related links, ads, author bios, a table of contents. Removing it should not break the meaning of the main content. Visually it is often a sidebar, but <aside> is about the *relationship* (supplementary), not the position, so it can appear anywhere in the layout.
Footer
The bottom region with legal, contact, and secondary links.
The <footer> landmark closes the page with information about it: copyright, contact details, secondary navigation, and social links. It is where users instinctively look for "boring but important" links like privacy and terms. Like <header>, a <footer> can also appear scoped inside an <article> to describe just that content, but the page-level one describes the whole site.
Official Website site · All languages on AnatomyOf
The interactive tour needs JavaScript. Enable it to hover a callout and trace it into the code.