Page structure

Body

One header, one main, one footer, as direct children of body. That gives you the banner, main and contentinfo landmarks for free. Any section navigation sits between the header and main as nav siblings, zero or more.

The shell cannot sit inside a box, so the preview is a stand-in: this page is the real example, with its header and section bars above and its footer below.

<body>
  <header> … site navigation … </header>
  <nav>    … section navigation … </nav>   <!-- zero or more -->
  <main>   … the page itself  … </main>
  <footer> … site footer       … </footer>
</body>

Header

The site banner, one per page, the same across the whole site. It holds the brand (a link, not a heading) and the site-wide navigation. A header at body level is the banner landmark, so keep it to site-oriented chrome, not the current page's section tabs.

Navigation

Each bar is a nav with an aria-label, an optional title, and a ul of links; mark the current item with aria-current. Site-wide navigation lives inside the header; a page's section navigation sits below the header as nav siblings (zero or more, one per level), each its own navigation landmark. Give every bar a distinct label so the landmarks stay tellable apart. See Nav bar for the bars themselves.

Main

Inside main, a single h1 names the page, not the site, which is the brand. Sections open with a bare heading, one level deeper each time you nest (h1 → h2 → h3). There is no header element inside a section, and layout containers never use the landmark tags either.

A second main and h1 cannot sit inside this page, so the preview shows the same outline two levels down; this page's own main is the real example.

<main>
  <h1>Page title</h1>
  <section>
    <h2>A section</h2>
    <section>
      <h3>A subsection</h3>
    </section>
  </section>
</main>

Footer

A single footer closes the page: the site-wide contentinfo. One per page; sections don't need their own.