HTML5 header element

Last update on August 19 2022 21:50:45 (UTC/GMT +8 hours)

Header Element

One of the many significant new elements added in HTML5 is header element. We will discuss header element in detail in this document.

The purpose of the header element is to hold any of the h1 to h6 elements, a hggroup element, a table of content, a search form or associated logos. This element adds a semantic value to your HTML5 page. In general, it may be said as a container element which may contain an introductory or a navigational content.

header element has nothing to do with the head element. And, it does not introduce any new section, but it is the head of a section.

Usage

<header>
<h1>Main heading of the document.</h1>
<p>In this section we are discussing .......</p>
</header>

Whether start and end tags are required

Both start and end tags are required.

In which Categories does header element belong to

header element belongs to Flow Content.

Where header element can be used

It may be used where Flow Content is used.

Which elements can reside within header element

header element can contain Elements belong to Flow Content category, but it can't contain header or footer element.

Attributes

header element supports all Global attributes.

Example of HTML5 header element

This example shows how HTML5 header element is used to markup header of a document.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of HTML5 header element</title>
<meta name="description" content="This is an example of HTML5 header element. header element is the head of a new section." />
</head>
<body>
<header>
<h1>Example of HTML5 header element</h1>
<p>header element is the head of a new section.
It may contain : </p>
<ul>
<li>h1-h6</li>
<li>hggroup</li>
<li>Table of content</li>
<li>Search Form</li>
<li>Logos</li>
</ul>
</header>
</body>
</html>

View HTML5 header example in a separate browser window.

Example of HTML5 header element with multiple sections

In this example, the document has a primary heading within h1. In the following two subsections, h2 is used to markup the heading. The last portion of the page is not part of the header markup, still, it is part of the last subsection.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of HTML5 header element with multiple sections</title>
<meta name="description" content="Example of HTML5 header element with multiple sections. Content outside the header markup is part of the last subsection." />
</head>
<body>
<header>
<h1>Example of HTML5 header element with multiple sections</h1>
<p>header element is the head of a new section. It may contain : </p>
<nav>
<ul>
<li><a href="#">h1-h6</a></li>
<li><a href="#">hggroup</a></li>
<li><a href="#">Table of content</a></li>
<li><a href="#">Search Form</a></li>
<li><a href="#">Logos</a></li>
</ul>
</nav>
<!--First Subsection -->
<h2>First example : </h2>
<p>It shows using header for main heading of the page.</p>
<!--Second Subsection -->
<h2>Second Example : </h2>
</header>
<p>Shows how to use multiple subsections in a page and how header is used.</p>
</body>
</html>

Browser Compatibility

We have successfully tested the above example with following browser versions.

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	12.0.742.122	5.0	8.0	11.50	4.0

Previous: HTML5 footer tag
Next: HTML tags you will not use anymore