header, nav, main and footer: Structuring a Page

Most pages share the same outer structure.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<style>
  header, nav, main, footer { padding: 8px; margin: 4px 0; border: 1px dashed #ca4b00; }
</style>
<header>
  <h1>Juniper Books</h1>
  <nav aria-label="Main">
    <a href="/">Home</a> | <a href="/books">Books</a> | <a href="/contact">Contact</a>
  </nav>
</header>
<main>
  <h2>New this week</h2>
  <p>Fresh arrivals on the front table.</p>
</main>
<footer>
  <p>&copy; 2026 Juniper Books</p>
</footer>

The rules

• header: introductory content. A page can have one at the top, and sections can have their own too.
• nav: for major blocks of navigation links only, not for every list of links. If you have more than one nav, give each an aria-label, for example “Main” or “Footer”.
• main: the unique content of the page. There should be one visible main per page, and it should not be inside header, nav or footer.
• footer: closing information such as copyright, contact details and related links.

Landmarks

Browsers expose these elements to assistive technology as landmarks. Screen reader users can list them and jump between them, which is much faster than reading the whole page from the top.