Header

<header> #

::: section-content 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 #

::: section-content ::: iframe ::: {.output-header .border-rounded-top}

HTML Demo: <header> #

Reset :::

::: {#warning-no-script .warning-container} ::: warning The interactive example cannot be shown because JavaScript is disabled. ::: :::

::: {#warning-mathml-not-supported .warning-container .hidden} ::: warning The interactive example cannot be shown because MathML is not supported by your browser. ::: :::

::: {#editor-container .editor-container .tabbed-standard .hidden .border-rounded-bottom editor-type=“tabbed”} ::: {#tab-container .section .tabs} ::: {#tablist .tab-list role=“tablist”} HTML

CSS

JavaScript :::

::: {#html-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“html” aria-hidden=“true”} ::: {#html-editor}

<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>

::: :::

::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} .logo { background: left / cover url(’/media/examples/puppy-header-logo.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: #000 2px 2px 0.2rem; }

header > h1 {
  margin-bottom: 0;
}

header > time {
  font: italic 0.7rem sans-serif;
}

::: :::

::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::

::: {#output .output-container}

Output #

::: :::

::: {.section .console-container .hidden aria-hidden=“true”}

Console Output #

![] clear console

::: {#console .console} ::: :::

::: {#html-output .output .editor-tabbed} %html-content% ::: ::: :::

Usage notes #

::: section-content 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 #

::: section-content The <header> element originally existed at the very beginning of HTML for headings. It is seen in the very first website{target="_blank"}. At some point, headings became <h1> through <h6>, allowing <header> to be free to fill a different role. :::

Attributes #

::: section-content This element only includes the global attributes. :::

Examples #

Page Header #

::: section-content ::: code-example [html]{.language-name}

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

:::

Result #

::: {#sect1 .code-example} ::: iframe ::: ::: :::

Article Header #

::: section-content ::: code-example [html]{.language-name}

<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 #

::: {#sect2 .code-example} ::: iframe ::: ::: :::

Accessibility #

::: section-content 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 #

::: section-content

Content categoriesFlow content, palpable content.
Permitted contentFlow content, but with no <header> or <footer> descendant.
Tag omissionNone, both the starting and ending tag are mandatory.
Permitted parentsAny 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 rolebanner, or generic 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 rolesgroup, presentation or none
DOM interfaceHTMLElement
:::

Specifications #

::: _table #

Specification #

HTML Standard
[# the-header-element]{.small}

:::

Browser compatibility #

::: _table Desktop Mobile

         Chrome    Edge   Firefox   Internet Explorer   Opera   Safari   WebView Android   Chrome Android   Firefox for Android   Opera Android   Safari on IOS   Samsung Internet

header 5 12 4 9 11.1 5 4.4 18 4 11.1 4.2 1.0 :::

See also #

::: section-content

::: _attribution © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header{._attribution-link} :::

Calendar December 2, 2023
Edit Edit this page