HTML5 and Web Page Structure

Header Element

The Head Element or Tag has been introduced for producing better content structure in HTML documents:

The code:
Represents a group of introductory or navigational aids.

A header element can contain the section's heading (an h1-h6 element or hgroup element), but is not required.

The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.

The Header Element should not be used with sections. Rather use the Hgroup Element. Better still the h1-h6 Elements.

Code examples:
The code below shows 2 instances of using headers on one web page.
<h1>Page Title</h1>
<p><a href="site1.html">Site link 1</a> -
<a href="site2.html">Site link 2</a> -
<a href="site3.html">Site link 3</a></p>
<p>Last Modified: date</p>
<li><a href="articleindex.html">Index of all articles</a></li>
<li><a href="articleinfo1.html">Article Link 1</a></li>
<li><a href="articleinfo2.html">Article link 2</a></li>

<h1 >Article Title</h1>
<p>Article content</p>
...more content...
<p>footer information</p>
...more article stuff...
<p>Copyright Info </p>

New Elements and Beginners

Some of the new tags used as shown below might make the body code of a basic HTML5 document easier to read.

This structure can be used instead of using class customized divisions .

<div class="main></div>


*Use of the new tags article, section, header, footer, hgroup, nav and aside is a matter of the taste or the need of the author.

Note: some of these elements overlap in purpose.

The Heading Element accepts Global Attributes.

For a complete list of New Elements visit


Next see: The Division Tag and the Section Element