<header>: The Header element
============================

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

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
 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 roles | `group`, `presentation` or
 `none` |
| DOM interface | `HTMLElement` |

Specifications
--------------

| Specification |
| --- |
| HTML Standard # the-header-element |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Other section-related elements: `<body>`, `<nav>`, `<article>`, `<aside>`, h1, h2, h3, h4, h5, h6, `<footer>`, `<section>`, `<address>`.