<header>
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
HTML Demo: <header>
<header>
<a class="logo" 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 snuggly soft!</p>
</article>
Output
Beagles
I love beagles so much! Like, really, a lot. They’re adorable and their ears are so, so snuggly soft!
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 contain the surrounding section's heading (an h1 – h6 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.
Examples
Page Header
<header>
<h1>Main Page Title</h1>
<img src="mdn-logo-sm.png" alt="MDN logo" />
</header>
Result
Main Page Title
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
The Planet Earth
Posted on Wednesday, by
Jane Smith
We live on a planet that's blue and green, with so many things still unseen.
Accessibility
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
no corresponding role
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 GitHubChrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on iOS | Samsung Internet | WebView Android | |
|---|---|---|---|---|---|---|---|---|---|---|---|
Legend
Tip: you can click/tap on a cell for more information.
Full support