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:
- How To Use the HTML5 Audio Element
- Understanding HTML5 Video Element
- Essential Guide to HTML5 Document Structure
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!