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.
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>
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>
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...
For information about global attributes refer to this list of global attributes in HTML5.
For information about global events refer to this list of global events in HTML5.