Explanation of the HTML5 Header Element

One of the many significant new elements added in HTML5 is the header element. This article in the HTML5 series covers the explanation and usage of the <header>  element. The <header> element should be used as a container for introductory content or set of navigational links.The header element can also be used to wrap a section’s table of contents, a search form, sub headings, bylines, version history information, or any relevant logos. 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.

Other useful related articles:

Header tag can be used many times on a single web page; for example, it can be nested within each <article> element. Here are several examples of using the <header> element in HTML code. Place to start would be at the beginning of your page.

<h1>This is the heading one</h1>
<p>This is the paragraph</p>

You are not restricted to using one <header> element per site. You can use multiple headers, each of which will then become the <header> for that section of the document.

<h1>This is the heading one</h1>
<p>This is the paragraph one</p>
<h1>This is the heading two</h1>
<p>This is the paragraph two</p>
<p>Some text here...</p>

HTML5 <header> element is for the page header which might contain a  logo, navigation and any other consistent elements that might be considered the page header.

<a href="#"><img src="images/company-logo.gif" alt="Tutorial Chip"></a>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>

A <header> tag cannot be placed within a <footer>, <address> or another <header> element. As most browsers do not execute any display information via CSS for HTML5 elements, as is the case for the <header> element, and to be displayed as a block it will need to be specified in the style sheet as shown in the example below along with others.

header {

display: block;


You can use that and apply it to your own CSS projects. While most websites currently have one header at the top of the page as a masthead, you can have multiple headers in a single html5 document.

In Closing

That’s all for today. I hope this article helped you to understand what you can do with the HTML5 <header> tag. Any questions? Feel free to leave a comment below!