<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
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 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
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
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
BCD tables only load in the browser