Semantic HTML in 10 Minutes: header, main, nav, footer

Tags should describe the job a region performs. Replacing an anonymous wrapper with main can expose a useful navigation destination to assistive technology. Calling every wrapper a section or header does not make that structure useful.

This example separates the site introduction, two navigation regions, the unique page content and the closing information. Save it as page-regions.html. The content is a fictional store guide for testing structure.

Build a complete page structure

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Give the page meaningful regions</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 16px;
      font: 1rem/1.6 system-ui, sans-serif;
      color: #080b0e;
      background: #ffffff;
    }
    main { max-width: 60rem; margin-inline: auto; }
    .site-header, .site-footer { padding: 16px; background: #f2f8ff; }
    nav { display: flex; flex-wrap: wrap; gap: 16px; }
    main { padding-block: 24px; }
    a { color: #034bff; }
    .skip-link {
      position: absolute;
      top: 8px;
      left: 8px;
      padding: 8px;
      background: #ffffff;
      transform: translateY(-200%);
    }
    .skip-link:focus { transform: none; }
    a:focus-visible { outline: 3px solid #034bff; outline-offset: 3px; }
  </style>
</head>
<body>
  <a class="skip-link" href="#content">Skip to main content</a>
  <header class="site-header">
    <p>Corner Store</p>
    <nav aria-label="Primary">
      <a href="#products">Products</a>
      <a href="#contact">Contact information</a>
    </nav>
  </header>
  <main id="content" tabindex="-1">
    <h1>Store collection guide</h1>
    <article>
      <header><h2 id="products">Preparing a collection</h2><p>A short practical guide.</p></header>
      <p>Bring your order reference and check the collection details.</p>
    </article>
  </main>
  <footer class="site-footer" id="contact">
    <p>Ask the store team about your order reference.</p>
    <nav aria-label="Support"><a href="#products">Collection help</a></nav>
  </footer>

</body>
</html>

You should see a pale site header, the guide content and a pale footer. The article also has a header for its own title and introduction. The nested header is not a second site banner merely because it uses the same tag name.

Test the skip link

1. Reload without clicking inside the page.
2. Press Tab until “Skip to main content” appears.
3. Activate it with Enter.
4. Confirm the URL points to the content fragment and the main region is reached.

The main element has tabindex="-1" so it can receive focus as a destination without becoming an extra stop in the normal Tab sequence. A skip link gives keyboard users a route past repeated navigation. It does not replace a meaningful heading structure or a usable navigation menu.

Inspect the exposed regions

Open the browser's accessibility tree or select each element and inspect its accessibility properties. For this structure, look for the page banner, the Primary and Support navigation regions, main and content information. Browser tools may present these under different panel names.

The body-level site header and footer provide the page-level banner and contentinfo semantics in this example. The header nested inside the article introduces that article; it does not have the same page-level landmark meaning. Context matters, so avoid saying that every header or footer is always a landmark.

Give repeated navigation a useful name

Both navigation blocks contain links, but they serve different purposes. Their labels distinguish Primary navigation from Support navigation. Use names that describe the purpose rather than labels such as “first nav” and “second nav”.

A handful of ordinary links inside a paragraph does not always need a navigation region. Reserve nav for a navigation block. Too many indistinguishable regions can make the landmark list harder to use rather than easier.

Keep layout wrappers when they have no meaning

A div remains appropriate for a purely visual row or spacing wrapper. A named section is useful when the content has an actual thematic grouping. This example's article groups the guide; its heading explains that topic.

Keep one exposed main region for the current document view. If an application retains inactive views in the DOM, manage their visibility and accessibility deliberately instead of exposing several competing “main” areas. Do not put the entire page inside the site header just because it appears first in the source file.

Remove the CSS and compare

Temporarily disable the style block. Follow the links and inspect the accessibility tree again.

Expected result: the page loses its spacing and pale surfaces, but its headings, regions and link destinations remain. Semantic HTML describes structure; CSS controls presentation. Restore the styles and test the skip link once more at a narrow viewport.

For the landmark roles and their context, see WAI's landmark guidance. To connect labels to individual controls, continue to the contact-form walkthrough.