Header, Footer & Nav

Difficulty: Intermediate

The <header>, <footer>, <nav>, and <main> elements are the four foundational landmark elements in HTML5. They define the major structural regions of a web page and serve as navigation anchors for assistive technologies. Understanding how to use them correctly is essential for building accessible, well-structured websites.

The <header> element represents introductory content for its nearest ancestor sectioning content or the page itself. When used as a direct child of <body>, it acts as the site-wide banner. But <header> can also appear inside <article> or <section> elements to represent the heading group of that specific section. A page can have multiple <header> elements, but the top-level one typically contains the site logo, primary navigation, and possibly a search form.

The <footer> element works symmetrically to <header>. At the page level, it typically contains copyright notices, contact links, social media icons, and secondary navigation. Like <header>, it can also appear inside <article> or <section> elements - for example, an article footer might contain author information, publication date, and share buttons. The page-level footer automatically maps to the ARIA contentinfo landmark role.

The <nav> element identifies a section of navigation links. It should wrap major navigation blocks - primary site navigation, pagination, breadcrumbs, or table of contents. Not every group of links needs a <nav>; a list of links in a footer paragraph does not require it. When you have multiple <nav> elements on a page (common with primary nav and footer nav), use aria-label to differentiate them so screen reader users can distinguish between them.

The <main> element represents the dominant content of the page - the content unique to that specific page, excluding headers, footers, sidebars, and navigation that repeat across pages. There must be only one visible <main> element per page (you can have hidden ones for single-page app routing). The <main> element must not be nested inside <header>, <footer>, <nav>, or <aside>. It maps to the ARIA main landmark role and is the target for "skip to main content" links.

Code examples

Page-Level Landmarks

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

  <header>
    <div class="logo">
      <a href="/">BrandName</a>
    </div>
    <nav aria-label="Primary navigation">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/products">Products</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main id="main-content">
    <h1>Welcome to BrandName</h1>
    <p>Your one-stop shop for quality products.</p>
  </main>

  <footer>
    <nav aria-label="Footer navigation">
      <a href="/privacy">Privacy Policy</a>
      <a href="/terms">Terms of Service</a>
    </nav>
    <p>&copy; 2026 BrandName. All rights reserved.</p>
  </footer>
</body>

This structure creates clear page landmarks. The skip link lets keyboard users bypass navigation. Both nav elements have aria-labels to differentiate them. The main element has an id that the skip link targets.

Headers and Footers Inside Articles

<main>
  <article>
    <header>
      <h2>Understanding CSS Grid</h2>
      <p>By <a href="/authors/jane">Jane Doe</a></p>
      <time datetime="2026-03-11">March 11, 2026</time>
    </header>

    <p>CSS Grid is a two-dimensional layout system...</p>
    <p>Unlike Flexbox, Grid handles both rows and columns...</p>

    <footer>
      <p>Tags: <a href="/tags/css">CSS</a>, <a href="/tags/layout">Layout</a></p>
      <p>Share: <a href="#">Twitter</a> | <a href="#">LinkedIn</a></p>
    </footer>
  </article>
</main>

The article has its own header (title, author, date) and footer (tags, share links). These are distinct from the page-level header and footer. This pattern is common for blog posts, news articles, and product cards.

Multiple Nav Elements

<header>
  <nav aria-label="Primary">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/docs">Docs</a></li>
      <li><a href="/blog">Blog</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h1>Documentation</h1>
    <nav aria-label="Table of contents">
      <ol>
        <li><a href="#intro">Introduction</a></li>
        <li><a href="#setup">Setup</a></li>
        <li><a href="#api">API Reference</a></li>
      </ol>
    </nav>
    <section id="intro">
      <h2>Introduction</h2>
      <p>Welcome to the documentation...</p>
    </section>
  </article>
</main>

<footer>
  <nav aria-label="Footer">
    <a href="/sitemap">Sitemap</a>
    <a href="/rss">RSS Feed</a>
  </nav>
</footer>

Three nav elements serve different purposes: primary site navigation, an in-page table of contents, and footer links. The aria-label on each one ensures screen readers can announce which navigation the user is entering.

Key points

A page can have multiple <header> and <footer> elements (inside articles, sections), but the page-level ones serve as ARIA banner and contentinfo landmarks.
Always add aria-label to differentiate multiple <nav> elements. Screen readers announce these labels, e.g., 'Primary navigation' vs 'Footer navigation'.
The <main> element must be unique and visible only once per page. It should not be nested inside landmark elements like header, footer, nav, or aside.
Skip links (a hidden link to #main-content) are a WCAG requirement for keyboard accessibility. They become visible on focus.

Concepts covered

header, footer, nav, main, Landmark Roles, Skip Links