<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.
<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.
<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
h6 element) and optional subheading, but this is not required.
<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
<header> to be free to fill a different role.
This element only includes the global attributes.
<header> <h1>Main Page Title</h1> <img src="mdn-logo-sm.png" alt="MDN logo" /> </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>
|Content categories||Flow content, palpable content.|
Flow content, but with no
|Tag omission||None, both the starting and ending tag are mandatory.|
Any element that accepts
flow content. Note that a
|Implicit ARIA role||
no corresponding role
if a descendant of an
|Permitted ARIA roles||
|HTML Standard |
BCD tables only load in the browser