HTML5 <header> Tag

The HTML <header> tag used to represent a group of introductory or navigational aids. It generally contains some heading elements but you can also include other elements like a logo, a search form, and so on.

The <header> element is not sectioning content and therefore does not introduce a new section in the outline. That said, a header element is intended to usually contain the surrounding section’s heading (an h1–h6 element), but this is not required.

The only content permitted inside this element is flow content. However, there should be no <header> or <footer> descendant. Both the starting and ending tag are mandatory for this element. The parent of the <header> tag can be any element that accepts flow content. Note that a <header> element must not be a descendant of an <address>, <footer> or another <header> element.

The following style is applied to this element by default:

header {
  display: block;
}

Here is an example of using this tag:

<header>
  <h4>Choose a Category</h4>
  <nav>
    <ul>
      <li><a href="/html.php">HTML</a>
      <li><a href="/css.php">CSS</a>
      <li><a href="/sass.php">Sass</a>
    </ul>
  </nav>
</header>

Attributes

This element only accepts global attributes.

Examples

See the Pen HTML header Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <header> element on MDN.
  2. You can also read the HTML <header> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top