<header>: The Header element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The <header> 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.

Try it

Usage notes

The <header> element has an identical meaning to the site-wide banner landmark role, unless nested within sectioning content. Then, the <header> element is not a landmark.

The <header> element can define a global site header, described as a banner in the accessibility tree. It usually includes a logo, company name, search feature, and possibly the global navigation or a slogan. It is generally located at the top of the page.

Otherwise, it is a section in the accessibility tree, and usually contains the surrounding section's heading (an h1h6 element) and optional subheading, but this is not required.

Historical Usage

The <header> element originally existed at the very beginning of HTML for headings. It is seen in the very first website. At some point, headings became <h1> through <h6>, allowing <header> to be free to fill a different role.

Attributes

This element only includes the global attributes.

Accessibility

The <header> element defines a banner landmark when its context is the <body> element. The HTML header element is not considered a banner landmark when it is descendant of an <article>, <aside>, <main>, <nav>, or <section> element.

Examples

html
<header>
  <h1>Main Page Title</h1>
  <img src="mdn-logo-sm.png" alt="MDN logo" />
</header>

Result

Article Header

html
<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>
      Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
      Jane Smith
    </p>
  </header>
  <p>
    We live on a planet that's blue and green, with so many things still unseen.
  </p>
  <p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p>
</article>

Result

Technical summary

Content categories Flow content, palpable content.
Permitted content Flow content, but with no <header> or <footer> descendant.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content. Note that a <header> element must not be a descendant of an <address>, <footer> or another <header> element.
Implicit ARIA role banner, or generic if a descendant of an article, aside, main, nav or section element, or an element with role=article, complementary, main, navigation or region
Permitted ARIA roles group, presentation or none
DOM interface HTMLElement

Specifications

Specification
HTML Standard
# the-header-element

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
header

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also