Five elements describe the structure of a page: header, nav, main, article and footer. They look like plain boxes until you realise that each one carries a promise about what it contains, and that promise is used by screen readers, search engines, and the browser's own features.
What does each element mean?
<body>
<header>
<a href="/" class="logo">Acme</a>
<nav aria-label="Primary">
<ul>
<li><a href="/docs">Docs</a></li>
<li><a href="/pricing">Pricing</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>How semantic layout works</h1>
<p>Article content that would still make sense on its own.</p>
</article>
</main>
<footer>
<p>© Acme</p>
</footer>
</body>
Each one means something specific. header is introductory content for its nearest section — usually the site header, but it can appear inside an article. nav is a block of major navigation links. main is the unique content of the page, and there must be exactly one. article is a self-contained composition that would still make sense if it were syndicated on its own. footer is closing content for its section — copyright, links, contact details.
Why does the difference between article and main matter?
Because they answer different questions. main answers "what is unique to this page?" — and exactly one element has it. article answers "what is a discrete piece of content?" — and a page can have many.
<main>
<h1>Latest tutorials</h1>
<article>
<h2><a href="/tutorials/python">Learning Python</a></h2>
<p>Posted 12 October</p>
</article>
<article>
<h2><a href="/tutorials/css">Understanding CSS</a></h2>
<p>Posted 10 October</p>
</article>
</main>
The practical test for article is the syndication test: if a reader could copy this article into a newsletter or a feed and it would still be complete and understandable, it belongs in an article. A sidebar with a list of links does not, so it stays a plain aside.
Where do section, aside and div fit in?
section is a thematic grouping with a heading, usually with an article inside it. aside is content tangentially related to what is around it. div has no meaning at all, which makes it the right choice only when nothing more specific fits.
<div> <!-- generic grouping -->
<section> <!-- thematic grouping with a heading -->
<article> <!-- self-contained composition -->
<aside> <!-- tangentially related content -->
There is a widespread myth that semantic elements cannot be styled, or that they are less flexible than a div with a class. It is not true. Every one of them can be styled with CSS exactly as you would style a div, and the difference is that the element now also says what it is to everything that is not a browser.
What do you actually gain?
Three concrete benefits. Screen readers can offer navigation landmarks — a menu of "main", "navigation" and "content" — so a user can jump to the part of the page they want instead of reading it linearly. Search engines understand the primary content of a page when it is inside main, and can treat each article as a separate entry when the page is a listing. And the browser itself gets a skip mechanism: pressing a key that focuses the address bar and then tabbing moves focus into the page content in many browsers, and the main element is what it lands on.
<!-- the landmark is explicit and named -->
<nav aria-label="Breadcrumb">...</nav>
<nav aria-label="Footer links">...</nav>
When a page has more than one navigation region, each needs its own aria-label, otherwise a screen reader announces several identical "navigation" landmarks and the user cannot tell them apart. That is the one case where an ARIA attribute earns its place on a structural element.
What do landmarks look like in a real page?
Most pages end up with three navigation landmarks and two content landmarks, and the browser's accessibility panel lists them all so you can see whether the labels are useful.
<body>
<header>
<a href="/" class="logo">Acme</a>
<nav aria-label="Primary">...</nav>
</header>
<main>
<h1>How semantic layout works</h1>
...
</main>
<aside aria-label="Related tutorials">...</aside>
<footer>
<nav aria-label="Footer">...</nav>
<p>© Acme</p>
</footer>
</body>
Three things about that structure are worth noting. The header and footer are per-section, so a page with a card grid where each card has its own header has several header elements, and that is correct. The aside is a separate landmark from main, which means a screen reader user can skip the related links if they want the article. And each landmark has a name, so "navigation" appears twice with different labels rather than as two identical entries.
How do headings work inside these elements?
The outline of a page is built from headings wherever they appear, and it is separate from the landmark structure. A page can have perfect landmarks and a broken outline, or the reverse. The two systems answer different questions: landmarks say where in the page a thing is, headings say what it is about.
<main>
<h1>How semantic layout works</h1> <!-- the page title -->
<section>
<h2>Why structure matters</h2> <!-- a section of the page -->
<p>...</p>
</section>
<section>
<h2>Choosing the right element</h2>
<article>
<h3>When to use article</h3> <!-- a discrete piece inside it -->
<p>...</p>
</article>
</section>
</main>
Because headings are the only thing that gives a long page a navigable structure, the section element works best when it contains a heading. A section with no heading is a grouping with no theme, and a div says that more honestly.
Quick reference
- One
mainper page: the unique content. articleis for content that stands alone, and there can be many.headerandfooterare per-section, not just per-page.navis for major navigation; give it a label when there is more than one.- Semantic elements style exactly like a div — the difference is the meaning.
Try it yourself: take a page built entirely from divs and rebuild it with the five structural elements. Then open the accessibility tree in the developer tools and compare the landmark list before and after. Add a second nav and watch what a screen reader would announce.