HTML - Header (element)

HTML - Header (element)

About

The header in html is an element which principal use is to group ancillary information around the top level heading (ie h1).

It may (not required)

contain the section's heading (an h1–h6 element or an hgroup element)
wrap:
- a section's table of contents,
- a search form,
- subheading
- or any relevant logos (image)

The header element is not a section element and therefore doesn't take part in the outline algorithm.

Articles Related

Example

Specification's header

<section>
	<header>
	 <p>Welcome! <a href="#">This is home of...</a></p>
         <hgroup>
               <h1><a href="#">The Falcons!</a></h1>
               <h2>Living — Last Updated 19 October 2015</h2>
         </hgroup>
	 <p><a href="#">The Lockheed Martin multirole jet
	 fighter aircraft!</a> This page discusses the F-16 Fighting
	 Falcon's innermost secrets.</p>
        <dl>
            <dt>Participate:</dt>
            <dd><a href="https://github.com/whatwg/fullscreen">GitHub whatwg/fullscreen</a></dd>
            <dt>Commits:</dt>
            <dd><a href="https://github.com/whatwg/fullscreen/commits">GitHub whatwg/fullscreen/commits</a></dd>
       </dl>
	</header>
	....
</section>

Rendered by WebCode

Other

<body>
 <header>
  <h1>Little Green Guys With Guns</h1>
  <nav>
   <ul>
    <li><a href="/games">Games</a>
    <li><a href="/forum">Forum</a>
    <li><a href="/download">Download</a>
   </ul>
  </nav>
  <h2>Important News</h2> <!-- this starts a second subsection -->
  <!-- this is part of the subsection entitled "Important News" -->
  <p>To play today's games you will need to update your client.</p>
  <h2>Games</h2> <!-- this starts a third subsection -->
 </header>
 <p>You have three active games:</p>
 <!-- this is still part of the subsection entitled "Games" -->