Header & Footer (<header>, <footer>) — HTML

<header> and <footer>

<header> and <footer> mark introductory and closing content. The key thing that trips people up: neither is limited to "the top and bottom of the page." Both can appear multiple times—once per page, but also once per <article> or <section> they belong to.

Page-Level Header and Footer

At the top level, a single <header> typically holds the site logo, primary navigation, and maybe a search box. A single page-level <footer> typically holds copyright, secondary links, and contact information.

page-level.html

HTML

<body>
  <header>
    <h1>Let Codes</h1>
    <nav>
      <ul>
        <li><a href="/html">HTML</a></li>
        <li><a href="/css">CSS</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <!-- page content -->
  </main>

  <footer>
    <p>&copy; 2026 Let Codes.</p>
    <nav aria-label="Footer">
      <a href="/privacy">Privacy</a>
      <a href="/terms-of-use">Terms</a>
    </nav>
  </footer>
</body>

Section-Level Header and Footer

Nested inside an <article> or <section>, <header> and <footer> describe just that block—not the whole page. This is perfectly valid, and common in blog listings and card-style layouts.

article-level.html

HTML

<article>
  <header>
    <h2>Understanding the Box Model</h2>
    <p>By Priya Shah — <time dateTime="2026-01-12">January 12, 2026</time></p>
  </header>

  <p>Every element in CSS is a box made up of content, padding, border...</p>

  <footer>
    <p>Tags: <a href="/tags/css">CSS</a>, <a href="/tags/basics">Basics</a></p>
  </footer>
</article>

Here, the <header> holds the article's title and byline—not site navigation—and the <footer> holds tags relevant only to this one article, not the whole page.

Typical Contents

Element	Typical contents
<header> (page)	Site logo/name, primary navigation, search box
<header> (article/section)	Title/heading, author, publish date, byline
<footer> (page)	Copyright, secondary/legal links, contact/social links
<footer> (article/section)	Tags, related links, author bio, "last updated" info

Multiple headers/footers, one per landmark

A page with a page-level header, three articles each with their own header, and a page-level footer is completely valid HTML—each one describes its immediate containing section, not the whole document.

Neither can go inside <address>, and both must not contain another <header>/<footer>

A <header> can't contain another <header> or a <footer> (nesting the same landmark type inside itself isn't meaningful), and neither should be a descendant of <address>.

Header and Footer Inside <aside>

A sidebar can have its own header and footer too—for example, a "Related Articles" aside with a heading at the top and a "View all" link at the bottom.

aside-header-footer.html

HTML

<aside>
  <header>
    <h2>Related Articles</h2>
  </header>

  <ul>
    <li><a href="/post-1">Understanding CSS Grid</a></li>
    <li><a href="/post-2">Flexbox in 10 Minutes</a></li>
  </ul>

  <footer>
    <a href="/tags/css">View all CSS articles</a>
  </footer>
</aside>

Multiple Page-Level Navigation Landmarks

It's common to have more than one <nav> on a page—primary navigation in the header, secondary/legal links in the footer. Since both are landmarks with the same role, give each an aria-label so screen reader users can distinguish them when jumping between navigation regions.

labeled-nav.html

HTML

<header>
  <nav aria-label="Primary">
    <a href="/html">HTML</a>
    <a href="/css">CSS</a>
  </nav>
</header>

<footer>
  <nav aria-label="Footer">
    <a href="/privacy">Privacy</a>
    <a href="/terms-of-use">Terms</a>
  </nav>
</footer>

Without aria-label	With aria-label
Screen reader announces "navigation" twice, indistinguishable	Screen reader announces "Primary navigation" and "Footer navigation"

Label repeated landmarks, not unique ones

If a page has only one <nav>, an aria-label is optional. Once you have two or more of the same landmark type, labeling each becomes important for a coherent navigation experience.

What Not to Put in <header>/<footer>

Neither element should be used simply because content happens to sit visually at the top or bottom of a box—the test is whether the content is genuinely introductory or concluding for its section, not its pixel position. A sidebar widget floated to the top of the page by CSS is not automatically a <header>.

<header> marks introductory content: it can appear once at the page level and again inside any article or section.
<footer> marks closing content, with the same page-level-or-nested flexibility.
A page-level header usually holds branding and navigation; a page-level footer usually holds copyright and legal links.
A nested header/footer describes just its containing article or section—title/byline, or tags/related links.