By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

HTML Header Tag

Reference showing how to use the Header tag of HTML.

Edited: 2016-01-18 06:00

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 can include a heading, such as h1-h6, or an hgroup, but it is not required.

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>