Semantic Page Layout

Semantic elements describe the role of a part of the page. Most pages share a common layout, and HTML has an element for each region:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Corner Bakery — Fresh Bread Daily</title>
  </head>
  <body>
    <header>
      <a href="/"><img src="/logo.svg" alt="Corner Bakery home" width="160" height="48"></a>
      <nav aria-label="Main">
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/menu">Menu</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <h1>Fresh bread, every morning</h1>
      <p>We bake from 4 a.m. so you don't have to.</p>
    </main>

    <footer>
      <p>&copy; 2026 Corner Bakery · <a href="/privacy">Privacy</a></p>
    </footer>
  </body>
</html>

Why it matters

These elements look exactly like plain divs — they have no special styling. But they create landmarks. Screen-reader users can list landmarks and jump straight to "main" or "navigation" instead of listening to the whole header on every page. Browsers' reader modes and search engines use them to find the real content.

Notes

• header and footer can also appear inside an article or section as that part's own header or footer. Only the page-level ones become "banner" and "contentinfo" landmarks.
• Not every group of links is a nav — use it for main menus, tables of contents, and pagination, not for every link in the footer.
• With more than one nav, give each an aria-label ("Main", "Breadcrumb", "Footer") so they can be told apart.

Practice

Take the bakery page above and add a second navigation block in the footer labelled "Footer" with links to "Jobs" and "Press".

<footer>
  <nav aria-label="Footer">
    <ul>
      <li><a href="/jobs">Jobs</a></li>
      <li><a href="/press">Press</a></li>
    </ul>
  </nav>
  <p>&copy; 2026 Corner Bakery</p>
</footer>