Page structure

Every page is the same three landmarks — a header, a main and a footer — with the document's outline living inside main.

The shell

One header, one main, one footer, as direct children of body. That gives you the banner, main and contentinfo landmarks for free.

<body>
  <header> … site navigation … </header>
  <main>   … the page itself  … </main>
  <footer> … site footer       … </footer>
</body>

The header

The header holds navigation. The brand is a link, not a heading; each bar is a nav with an aria-label, a title, and a ul of links. Stack more nav bars for deeper levels — see Navigation.

Main & headings

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.

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