Widely available Supported across all major browsers. Safe to use in production.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS

The HTML element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.

5
12
4
5
18
4.2
1+Supported (version) Not supported Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

HTML
<header>
  <h1>Site Name</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">Overview</a>
  </nav>
</header>
<footer>
  <p>© 2024 Site Name</p>
</footer>

Live demo

Page header and footer

pe-j. vertical structureization. with Header and footer.

PreviewFullscreen

Article header and footer

Article within header / footer usemetainfo alignlogic.

PreviewFullscreen

Card header and footer

header / footer Usage. with cardUI.

PreviewFullscreen

Use cases

  • Using <header> and <footer>

    The <footer> HTML element represents a footer for its nearest ancestor sectioning content or sectioning root element.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Verify how this element is announced by screen readers.