HTML <header> Tag

The <header> tag defines a header of a page or a section. It usually contains a logo, search, navigational links, etc.

The <header> tag is a new element in HTML5. In an HTML document it is allowed to use several <header> tags, which can be placed in any part of it.

It is not permitted to place the <header> tag inside the <footer> and <address> elements, and in another <head> tag too.

Syntax

The <head> tag comes in pairs; the content is written between the opening (<head>) and closing (</head>) tags.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      li {
        display: inline-block; 
        margin-right: 10px;
        color: #778899;
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <ul style="padding:0;">
          <li>Home</li>
          <li>About us</li>
        </ul>
      </nav>
      <h1>Welcome to our page</h1>
      <hr>
    </header>
    <article>
      <header>
        <h2>The section title</h2>
        <p>The text paragraph.</p>
      </header>
    </article>
  </body>
</html>

Result

Attributes

The <header> tag supports Global Attributes and the Event Attributes.

Browser support
6+ 9+ 4+ 5+ 11.1+

Prev
Next

Related articles