Semantic Page Structure

Basic

Zoom out from headings and paragraphs and a page has a shape you can recognize with your eyes closed: a band across the top, some navigation, a column of real content, a footer underneath. Readers build that map unconsciously. Assistive technology builds it from markup, and it can only build what you actually wrote.

<body>
  <header>Site header</header>
  <?>Main article</main>
</body>

The elements in this lesson are landmarks. Screen readers list them the way sighted readers scan a page's silhouette, and keyboard users jump straight to <main> to skip your navigation on every single page, which is exactly what they want to do on every single page.

The page skeleton

A typical document page divides into a handful of elements, each saying what its region is rather than how it looks.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<body>
  <header>
    <a href="/" class="logo">Foxipa</a>
    <nav aria-label="Main">
      <!-- the site menu -->
    </nav>
  </header>

  <main>
    <h1>The page's one subject</h1>
    <!-- the content readers came for -->
  </main>

  <aside>
    <!-- related material, or nothing -->
  </aside>

  <footer>
    <!-- small print, contact, more links -->
  </footer>
</body>

None of these elements paint anything. They are addresses on the page, and their value is that everyone, human and machine, shares the same map.

header: the region that introduces

A <header> introduces whatever contains it: the page, an article, a section. The page-level header usually carries the logo and primary navigation. An article's header carries its title and byline. If a region begins with identifying material, header is the honest wrapper for it, and only one header per containing element keeps the meaning clean.

nav: a region of major navigation

<nav> wraps groups of links that matter for getting around: the main menu, a table of contents, breadcrumbs. It is not for every cluster of links on the page, only the ones a reader might want to jump to, or past, as a unit. When a page has more than one, the aria-label="..." attribute keeps them distinguishable in lists that read Main and Footer instead of navigation, navigation .

main: the one thing they came for

<main> holds the content unique to this page, and there is exactly one per page, hidden from nothing, containing no content that repeats across the site. It is the most valuable landmark you will write: skip links target it, screen readers jump to it, and it is the difference between tabbing through twelve nav links on every page or none. Content that appears on every page, like site-wide promo banners, belongs outside it.

1
2
3
4
5
6
7

<body>
  <a href="#content" class="skip">Skip to content</a>
  <header><!-- logo and nav --></header>
  <main id="content">
    <!-- the content -->
  </main>
</body>

article: complete in itself

An <article> is a self-contained composition: a blog post, a product card, a review, a news item, one comment in a thread. The test is syndication: if the chunk would still make sense lifted out and republished elsewhere, it is an article. It deserves its own heading, and nested articles, a comment thread under its post, are articles all the way down.

section: a thematic group with a heading

A <section> groups related content under a heading that names the theme. The ingredients part of a recipe, the chapters of a long tutorial, the shipping and returns part of a product page. If you cannot give a section a heading, it is probably a styling container wearing a semantic name, and a <div> would be more honest. Sections nest naturally inside an article, and articles inside a section, and both are fine.

aside: related, but not required

An <aside> is content tangentially connected: pull quotes, sidebars, related links, advertising that is not the reason for the visit. Removing an aside should never break the page's argument. Inside an article, think magazine margin note; outside one, think the classic sidebar, a pattern that has mostly dissolved into fuller layouts but whose meaning still applies.

footer: the closing region

A <footer> closes what contains it: the page, or an article holding its tags and publication date. Page footers conventionally hold contact details, legal links, and secondary navigation. Like headers, they may appear per article as well as per page, and the browser tells them apart by containment, not position.

div and span: honest last resorts

None of this banishes <div> and <span>. They are the correct elements when a wrapper exists purely for styling or scripting and means nothing on its own. Layout needs thousands of them and that is fine. The rule is simpler than it sounds: reach for a meaningful element when the wrapper describes real content structure, and use the generic ones when it describes presentation only. Semantic elements in a stylesheet's clothing, a <section> with no heading, a <nav> around one link, mislead tools in a way a div never does, because a div promises nothing.

A whole page from these parts

The runnable example assembles a bakery home page from nothing but the elements in this lesson. Its CSS is deliberately plain so the structure stays readable. Try reordering the two article cards and notice nothing breaks: the outline is carried by markup, not by where things happen to sit. Then try changing an article's inner section into a div and observe that the page still renders, which is precisely why structural mistakes are so easy to ship and so worth checking.

Mistakes worth avoiding

• Wrapping everything in <section> because it sounds organized. Without a heading it is a div making promises it does not keep.

• More than one <main> on a page, or site-wide banners inside it. The landmark only works if it is singular and specific.

• Using <aside> for anything you would be upset to see removed. If the page depends on it, it is not tangential.

• A <nav> around every link group. Reserve it for major navigation, and label it when there is more than one.

• Divs with role="article" sprinkled on later to pass an audit. The real element is shorter to type and does more.

Quick check

If you can sketch a page's regions in the right elements, explain why main is singular and what a screen reader does with it, and say when a div beats a section, you have this lesson. When you are ready, take the Semantic Page Structure quiz.