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.

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

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.

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

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.

<header>
<a href="#"><img src="images/company-logo.gif" alt="Tutorial Chip"></a>
<nav>
<ul>
<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>
</ul>
</nav>
</header>

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!