HTML <header> Tag

The <header> element defines a header for a document or a section. It may contain some heading elements but also some other elements like a logo, wrapped section's header, a search form, etc.

The <header> element cannot be located in <address>, <footer> or another <header> element.

In one document several <header> tags can be used.

All browsers' new versions support the <header> element which is new in HTML5.

Syntax

The <header> tag comes in pairs. The content must be written between opening (<header>) and closing (</header>) tags.

Example

<!DOCTYPE html>
<html>
<head>
  <style>
    header {color: #1c87c9;}
    article {padding: 20px;}
    span {
      font-size: 14px;
      font-weight: 300;
      color: red;
    }
  </style>
</head>
<body>
  <article>
    <header>
        <h1>Some heading(title).</h1>
        <span>(author: Lipsum)</span>
        <hr>
     </header>
     <h3>Some subheading(title)</h3>
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
     <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </p>
  </article>
</body>
</html>

Let's see another example where the <header> element is used with nav bar.

Example

<!DOCTYPE html>
<html>
 <head>
   <style>
     header {
       padding: 10px 20px;
       background-color: #666666;
       text-align: right;
     }
     li { display: inline-block; margin-left: 10px; }
     a { color: white; }
     article { padding: 20px; }
   </style>
 </head>
 <body>
   <header>
     <nav>
       <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">About Us</a></li>
         <li><a href="#">Books</a></li>
         <li><a href="#">Contact</a></li>
       </ul>
     </nav>
   </header>
   <article>
     <h1>Main content</h1>
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
   </article>
 </body>
</html>

The <header> tag uses the Global Attributes.
Prev
Next