The HTML5 element is used to configure the main navigation area on a web page

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.

Inhaltsverzeichnis Show

Usage notes
Historical Usage
Article Header
Accessibility
Technical summary
Specifications
Browser compatibility
What tag ______ is used to create the main navigation area?
Which of the following is an html5 element used to indicate navigational content?
What HTML tag pair used to create a link to other web page?
What type of HTML list would be the best to use to display a list of terms and their definitions?

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 contain the surrounding section's heading (an h2 – 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 <h2> through <h6>, allowing <header> to be free to fill a different role.

Attributes

This element only includes the global attributes.

Examples

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

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>

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.

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`