<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
<header> <a href="#">Cute Puppies Express!</a></header><article> <header> <h1>Beagles</h1> <time>08.12.2014</time> </header> <p> I love beagles <em>so</em> much! Like, really, a lot. They’re adorable and their ears are so, so snugly soft! </p></article>.logo { background: left / cover url("/shared-assets/images/examples/puppy-header.jpg"); display: flex; height: 120px; align-items: center; justify-content: center; font: bold calc(1em + 2 * (100vw - 120px) / 100) "Dancing Script", fantasy; color: #ff0083; text-shadow: black 2px 2px 0.2rem;}header > h1 { margin-bottom: 0;}header > time { font: italic 0.7rem sans-serif;}Usage notes
When not nested withinsectioning content,<main>, or an element with the same ARIA role as these elements' implicit ARIA role, then the<header> element has an identical meaning to the site-widebanner landmark role. It defines a global site header, which 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, when nested within said elements, it loses its landmark status and represents a group of introductory or navigational aids for the surrounding section. It usually contains the surrounding section's heading (anh1 –h6 element) and optional subheading, but this isnot required.
Historical Usage
The<header> element originally existed at the very beginning of HTML for headings. It is seen inthe 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 theglobal attributes.
Accessibility
The<header> element defines abanner landmark when its context is the<body> element.
When placed inside an<article>,<main>,<section>,<nav>,<aside>, or an element with the same ARIA role as these elements' implicit ARIA role, the<header> element has thegeneric role instead, and is no longer considered a landmark. In this case, it cannot be labeled witharia-label oraria-labelledby.
Examples
Page Header
<header> <h1>Main Page Title</h1> <img src="mdn-logo-sm.png" alt="MDN logo" /></header>Result
Article Header
<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 acceptsflow content. Note that a<header> element must not be a descendant of an<address>,<footer> or another<header> element. |
| Implicit ARIA role | banner, orgeneric if a descendant of anarticle,aside,main,nav orsection element, or an element witharticle,complementary,main,navigation orregion role |
| Permitted ARIA roles | group,presentation ornone |
| DOM interface | HTMLElement |
Specifications
| Specification |
|---|
| HTML # the-header-element |