header element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

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="../../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>

Killer of Bill Cosby's Son Confesses

Conviction appeal by former O.C. high school student Mikail Markhasev is dropped at his request.

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

Attributes

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.