HTML Header Footer

The <header> and <footer> elements are semantic HTML5 tags used to mark up the introductory content and the closing content of a page or a section of a page. Instead of writing <div id="header"> and <div id="footer">, which only carry meaning through a name you invented, these elements tell the browser, search engines, and assistive technology exactly what role that content plays. That distinction matters for accessibility, SEO, and for keeping your markup self-documenting.

Overview / How it works

Semantically, <header> represents introductory or navigational content. At the top level of a document, that usually means a site logo, the site name, a primary navigation menu, and maybe a search box. But <header> is not reserved for the top of the page — it represents the header of its nearest ancestor sectioning content (such as <article>, <section>, <nav>, or <aside>), or of the whole document if there is no such ancestor. That means a single page can legally contain many <header> elements: one for the page itself, and one inside each <article> for that article’s own title and metadata.

<footer> works the same way in reverse. It represents the footer of its nearest ancestor sectioning content or the document itself. A footer typically contains information about its section: who wrote it, copyright notices, related links, or contact details. Just like <header>, you can have more than one <footer> on a page — a page-level footer at the very bottom, plus a small footer inside each article giving its publish date or author.

Neither element is sectioning content itself — using <header> or <footer> does not add a new entry to the document outline the way <section> or <article> does. They are purely labels for a role that content plays within whatever section contains them. By default, browsers render both as block-level elements (display: block in the user-agent stylesheet) with no built-in margin, border, or styling — visually, an unstyled <header> or <footer> looks identical to a plain <div>. All visual styling (background color, borders, spacing) is the job of CSS, covered in the CSS course.

Syntax

<header>
  <!-- introductory / navigational content -->
</header>

<footer>
  <!-- closing content: credits, links, copyright -->
</footer>

Both elements accept ordinary flow content (headings, paragraphs, lists, links, images, navigation, and so on), with two restrictions worth knowing:

  • No nesting of the same role. A <header> must not contain another <header> or a <footer> as a descendant, and a <footer> must not contain a <header> or another <footer>.
  • No <main> inside. Neither element may contain a <main> element, since <main> represents the dominant content of the document, not introductory or closing content.
Element Represents Typical contents
<header> Introductory content for its nearest sectioning ancestor Logo, site title, <nav>, search form, article title + byline
<footer> Closing content for its nearest sectioning ancestor Copyright, author info, related links, sitemap, back-to-top link

Examples

Example 1: A basic page header and footer

<header>
  <h1>Trail Guide Weekly</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/trails">Trails</a>
    <a href="/gear">Gear</a>
  </nav>
</header>

<p>Main article content would go here.</p>

<footer>
  <p>&copy; 2026 Trail Guide Weekly. All rights reserved.</p>
  <p><a href="/contact">Contact us</a></p>
</footer>

Result: The browser renders a heading reading “Trail Guide Weekly” followed by three navigation links stacked in the header area, then the paragraph, then a footer block showing the copyright line and a “Contact us” link. No borders or background appear since none were styled.

This is the site-level pattern: the <header> is the document’s introductory block since it has no sectioning ancestor, and the <footer> is the document’s closing block for the same reason.

Example 2: A header and footer inside an article

<article>
  <header>
    <h2>Ten Essential Items for a Day Hike</h2>
    <p>By Priya Nair &mdash; published July 20, 2026</p>
  </header>
  <p>Before you leave the trailhead, run through this checklist...</p>
  <footer>
    <p>Filed under: <a href="/tags/gear">Gear</a>, <a href="/tags/safety">Safety</a></p>
  </footer>
</article>

Result: The browser displays the article title as a heading, the byline paragraph beneath it, the body paragraph, and then a small footer line listing two tag links — all rendered as plain block text with default browser spacing.

Here the <article> is the nearest sectioning ancestor, so this <header> and <footer> describe only that article, not the whole page. A page can have many articles, each with its own header and footer, alongside a single page-level header and footer.

Example 3: A realistic full-page layout combining both

<header>
  <h1>Trail Guide Weekly</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/trails">Trails</a>
  </nav>
</header>

<main>
  <article>
    <header>
      <h2>Ten Essential Items for a Day Hike</h2>
      <p>By Priya Nair &mdash; July 20, 2026</p>
    </header>
    <p>Before you leave the trailhead, run through this checklist...</p>
    <footer>
      <p>Filed under: <a href="/tags/gear">Gear</a></p>
    </footer>
  </article>
</main>

<footer>
  <p>&copy; 2026 Trail Guide Weekly</p>
</footer>

Result: The page renders top to bottom as: the site header with title and two nav links, then the main content area containing the article (with its own small header and footer), and finally the site-wide footer with the copyright notice at the very bottom of the page.

This mirrors how real sites are structured: one outer <header>/<footer> pair for the whole document, and inner pairs scoped to each <article>.

How it works step by step

When the browser’s HTML parser encounters <header> or <footer>, it creates a generic block-level node in the DOM, exactly as it would for a <div> or <section> — there is nothing structurally special happening under the hood in terms of layout. What is special is the accessibility tree the browser builds alongside the DOM: a top-level <header> is exposed to screen readers with the ARIA landmark role banner, and a top-level <footer> is exposed with the role contentinfo. This lets screen reader users jump directly to “the page header” or “the page footer” using landmark navigation, the same way sighted users visually scan to the top or bottom of a page. When <header> or <footer> is nested inside a sectioning element like <article> or <section>, it does not get the banner/contentinfo role, because it is understood to describe only that section, not the whole page.

Common Mistakes

Mistake 1: Using <header> when you mean <head>

Beginners sometimes confuse the visible <header> element with the invisible <head> element, which holds metadata like <title> and <meta> tags and is never displayed on the page.

<head>
  <h1>My Site</h1>
</head>

This is invalid — <head> may only contain metadata elements, not visible content like <h1>. The heading belongs in the document <body>, wrapped in <header>:

<body>
  <header>
    <h1>My Site</h1>
  </header>
</body>

Mistake 2: Nesting a header inside a footer (or vice versa)

<footer>
  <header>
    <h2>About this site</h2>
  </header>
</footer>

The HTML specification disallows a <header> descendant inside a <footer> (and the reverse). If a footer needs a heading, use a plain heading element or a <section> instead:

<footer>
  <section>
    <h2>About this site</h2>
    <p>Trail Guide Weekly has been publishing since 2019.</p>
  </section>
</footer>

Mistake 3: Assuming only one header/footer is allowed per page

Some authors avoid using <header> or <footer> inside articles because they believe the elements can only appear once. As shown in Example 3, that’s incorrect — every <article> or <section> can have its own header and footer, scoped to that section.

Best Practices

  • Reserve a page-level <header> for branding and primary navigation, placed directly under <body>, not nested inside another sectioning element.
  • Give each <article> its own <header> for its title and byline when the page lists multiple independent pieces of content, such as a blog index.
  • Put site navigation inside <header> using a <nav> element, rather than a bare list of links, so assistive technology recognizes it as navigation.
  • Use <footer> for metadata about its containing section — copyright, authorship, related links — not for unrelated content that just happens to be visually at the bottom of a design.
  • Never nest <header> inside <footer>, <header> inside <header>, or place <main> inside either.
  • Don’t reach for <header> or <footer> just because content is at the top or bottom of a box visually — use them only when the content is genuinely introductory or closing in nature; otherwise a <div> or <section> may be more accurate.
  • Remember all visual appearance (background color, borders, sticky positioning) is controlled with CSS, not by the choice of element.

Practice Exercises

  1. Build a simple page with a page-level <header> containing an <h1> site title and a <nav> with three links, and a page-level <footer> containing a copyright paragraph.
  2. Inside that page, add two <article> elements, each with its own <header> (containing an <h2> title and an author paragraph) and its own <footer> (containing a “Filed under” tag link). Check that you end up with three <header> elements and three <footer> elements total on the page.
  3. Take a page that currently uses <div id="header"> and <div id="footer"> and rewrite it using semantic <header> and <footer> elements instead, without changing the visible content.

Summary

  • <header> represents introductory content for its nearest sectioning ancestor, or the whole page if there isn’t one.
  • <footer> represents closing content (credits, copyright, related links) for its nearest sectioning ancestor, or the whole page.
  • A single page can legally contain multiple <header> and <footer> elements — one per section, article, or the page itself.
  • Neither element adds to the document outline; both render as plain block-level boxes with no default styling.
  • A top-level <header> gets the banner landmark role and a top-level <footer> gets the contentinfo role for assistive technology; nested ones do not.
  • <header> and <footer> must not be nested inside each other, and neither may contain <main>.