Description

The header element contains the header of a section or document, where are usually placed headings, navigational links, search forms, logos, tables of contents, introductions, etc. In many cases, the contents of a document's header are consistent sitewide.

Authors must not confuse the header and head elements. While the head element provides metadata for the document, header contains a group of introductory or navigational elements.

When a header element is declared inside a sectioning element (like article or section) it represents a header in the scope of that element. Otherwise (when it belongs in the body) it represents a header for the whole document.

Examples

Our first example uses a header element to group a logo, the company name and a search form. This format is very likely to be found in real cases.

<header>
  <img src="/assets/images/falling-star-logo.png">
  <h1>The falling star</h1>
  <form action="search.php">
    <input type="text">
    <input type="submit" value="Search">
  </form>
</header>

Now, the header of this document displays some navigational links (properly enclosed by a nav element) and a table of contents.

<header>
  <nav>
    <a href="/">Home</a> -
    <a href="/recipes">Recipes</a> -
    <a href="/contact">Contact me</a>
  </nav>
  <h1>Risotto</h1>
  <h2>Table of contents</h2>
  <ul>
    <li>Ingredients</li>
    <li>Process</li>
    <li>Comments</li>
  </ul>
</header>

In our third example, we're declaring an article with its own header. In contrast to previous examples, in this case the header only affects its containing section.

<article>
  <header>
    <h1>Killer of Bill Cosby's Son Confesses</h1>
    <p id="intro">Conviction appeal by former O.C. high school student Mikail Markhasev is dropped at his request.</p>
  </header>
  <p>Saying he wanted to do the right thing, the man convicted of killing Bill Cosby's only son, Ennis, has written a letter to the California attorney general's office confessing to the crime and asking that his 1998 appeal be dropped...</p>
</article>

Attributes

Events