Landmark regions and page templates (header, nav, main, aside, footer)

Landmark regions and page templates: <header>, <nav>, <main>, <aside>, and <footer>. You met these in the beginner series; here we look at how they fit together on real multi-page sites and what to get right for accessibility.

What landmarks do

Landmarks are major regions of a page. Screen reader users can jump straight to ‘main content’ or ‘navigation’ without tabbing through every link in the header. Browsers expose landmarks in the accessibility tree. HTML5 semantic elements map to them automatically in most cases.

Using landmarks well means every page on your site shares a predictable skeleton. Users learn where things live. Developers know where to put the logo, the nav, and the unique page content.

The five core landmarks

<header> – introductory content for the page or a section. Often contains the site logo and top-level navigation. You can have more than one (for example, a <header> inside an <article> with the post meta), but there is usually one site-wide header at the top of <body>.
<nav> – a block of navigation links. Primary site menu, breadcrumb trail, table of contents – if the main job is ‘links to other pages or sections’, it belongs in <nav>.
<main> – the primary content unique to this page. Exactly one per page, not nested inside other landmarks. Everything the user came for should live here.
<aside> – tangentially related content: sidebars, pull quotes, related links, adverts. Helpful but not the main point of the page.
<footer> – closing content for the page or section: copyright, contact details, secondary links. Like <header>, you can have footers inside articles, but most sites have one site footer.

A basic page template

Here is a template you can reuse across a small brochure site. Only the contents of <main> change per URL:

<!DOCTYPE html>
<html lang="en-GB">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page title | Site name</title>
</head>
<body>

  <a class="skip-link" href="#main-content">Skip to main content</a>

  <header>
    <p class="site-title"><a href="/">Site name</a></p>
    <nav aria-label="Primary">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about/">About</a></li>
        <li><a href="/contact/">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main id="main-content">
    <!-- Page-specific content goes here -->
  </main>

  <footer>
    <p>&copy; 2026 Site name</p>
    <nav aria-label="Footer">
      <ul>
        <li><a href="/privacy/">Privacy</a></li>
      </ul>
    </nav>
  </footer>

</body>
</html>

The skip link is a small accessibility win: keyboard users jump past repeated navigation straight to <main>. Hide it off-screen until focused, or keep it visible – either works if it is the first focusable element.

Multiple navigation regions

Large sites often have several <nav> blocks: primary header menu, footer links, breadcrumbs, in-page table of contents. That is fine. Give each one a distinct accessible name with aria-label or aria-labelledby so screen reader users can tell them apart.

<nav aria-label="Primary">…</nav>
<nav aria-label="Breadcrumb">…</nav>
<nav aria-labelledby="toc-heading">
  <h2 id="toc-heading">On this page</h2>
  <ol>…</ol>
</nav>

Without labels, assistive tech may announce multiple ‘navigation’ landmarks with no way to distinguish them.

Main content boundaries

Everything unique to the page belongs inside a single <main>. Do not put the site header, footer, or global sidebar inside main. Do not nest <main> inside <article> or vice versa in confusing ways – a common pattern is <main> wrapping one <article> on a blog post page, or wrapping several sections on a marketing page.

Blog index example:

<main>
  <h1>Blog</h1>

  <article>
    <header>
      <h2><a href="/blog/first-post/">First post title</a></h2>
      <p><time datetime="2026-03-01">1 March 2026</time></p>
    </header>
    <p>Excerpt…</p>
  </article>

  <article>
    <header>
      <h2><a href="/blog/second-post/">Second post title</a></h2>
      <p><time datetime="2026-03-08">8 March 2026</time></p>
    </header>
    <p>Excerpt…</p>
  </article>
</main>

Each post preview is an <article> with its own header. The page has one H1 (‘Blog’) and H2 for each post title.

Aside and layout

<aside> often sits beside <main> in a two-column layout. Order in the HTML matters for accessibility: if the sidebar is supplementary, placing <main> first in the source (even if CSS floats the sidebar visually to the left) helps keyboard and screen reader users reach the primary content sooner.

<div class="layout">
  <main>
    <h1>Product name</h1>
    <p>Main description…</p>
  </main>

  <aside aria-labelledby="related-heading">
    <h2 id="related-heading">Related products</h2>
    <ul>
      <li><a href="/products/other/">Other product</a></li>
    </ul>
  </aside>
</div>

The wrapper <div class="layout"> is a layout hook only – no semantic meaning. The landmarks inside it do the structural work.

Header versus heading confusion

<header> is a landmark region. <h1> to <h6> are headings. An element can be both: the site header often contains the logo and nav but not necessarily the page H1. On inner pages, the H1 usually lives in <main>, not in the site <header>.

Inside an <article>, the <header> typically holds the title (as H2 or H1 depending on context), author, and date – metadata about that article, not the whole site.

When ARIA landmarks replace semantics

Prefer native elements. If you inherit markup full of <div id="header"> and cannot rewrite immediately, ARIA roles are a fallback:

<div id="header" role="banner">…</div>
<div id="content" role="main">…</div>
<div id="footer" role="contentinfo">…</div>

Do not double up: <header role="banner"> is redundant. Worse, <main role="main"> is fine, but adding role="navigation" to a <nav> is unnecessary. Use ARIA when HTML semantics are missing, not as a default layer on top of correct tags.

Templates across pages

Consistency is the point. A user who visits five pages on your site should find navigation in the same place, main content in the same landmark, footer links unchanged. When you extract a template (manually copy-pasting for now, or via includes later), keep:

The same skip link and landmark order
The same nav labels and link set (with aria-current="page" on the active item)
One <main> per page with a stable id if you use skip links

Mark the current page in navigation:

<li><a href="/about/" aria-current="page">About</a></li>

That beats relying on a CSS class alone – assistive tech understands aria-current.

Quick audit checklist

Exactly one <main> per page
All primary content inside <main>
Each <nav> has a unique accessible name when more than one exists
Site header and footer markup match across URLs
Skip link targets <main> and works with keyboard focus

Landmarks give your pages a stable skeleton. The next tutorials move into forms – grouping fields, validation attributes, and error messages that help rather than frustrate.