HTML Header Tag

Reference showing how to use the Header tag of HTML.

The HTML header element can be used to provide header information on a page, such as a site logo, horizontal navigation menu, or search form. The header is usually the top part of a website, such as demonstrated in the screenshot below:

Image showing the header section of a HTML page

However, the header may also be used to markup a contents table of a section, such as the one seen on Brugbart:

Image showing a table of contents

The header can include a heading, such as h1-h6, or an hgroup, but it is not required.

A warning about sections

A subject of confusion, is how to use headings with the header element. The header element is not a sectioning element, and therefor doesn't start a section on its own. If you want to indicate a section, include a h1 element in your header. Just remember to use h1 for your content as well, so that your content wont incorrectly be taken as a subsection of your site logo or site name.

Attributes

Attribute:	Value:	Description:
Attributes	Global Attributes	Common, Event, I18n

Using Header

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <title>My first Website</title>
    <style type="text/css">

     article, section, header { /* Older browsers need this fix, to render these elements properly */
     display: block;
    }
     
     /* The below styles are only included to
        demonstrate the structure of the page visually
        for the purpose of this example
     */
     section {
     border: 1px solid #298e31;
     padding: 1em;
    }
     article {
      margin: 1em;
     }
    </style>
  </head>

  <body>
    <header>
    <h1><img src="http://example.com/sitelogo.png" alt="Site Logo or site name"></h1>
    </header>
    <article>
       <header>
        <ol>
         <li><a href="#Section1">Section1</a></li>
         <li><a href="#Section1.1">Section1.1</a></li>
         <li><a href="#Section1.2">Section1.2</a></li>
         <li><a href="#Section2">Section2</a></li>
        </ol>
       </header>
       <h1>Example of how to use the section elements</h1>

       <p>This is a level 1 section in the page.</p>
       
       <section id="Section1">
        <h1>This is a subsection of the main article</h1>
        <p>This is a level 2 section, a subsection of the main article.</p>

        <section id="Section1.1">
         <h1>This is a subsection of the first subsection</h1>
         <p>And this is finally a subsection to the subsection it self, creating a level 3 section.</p>
        </section>
        <section id="Section1.2">
         <h1>This is a subsection of the first subsection</h1>
         <p>And this is finally a subsection to the subsection it self, creating a level 3 section.</p>
        </section>

       </section>
       <section id="Section2">
        <h1>This is a level 1 section in the page</h1>
        <p>This is another level 1 section in the page.</p>
       </section>
    </article>
  </body>

</html>

Brugbart Vision!

A warning about sections

Attributes

Using Header

Links