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:
<header></header>
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.
<body>
<header>
<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>
<nav>
<h1>Navigation</h1>
<ul>
<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>
</ul>
</nav>
</header>
<div>
<article>
<header>
<h1 >Article Title</h1>
</header>
<div>
<p>Article content</p>
...more content...
</div>
<footer>
<p>footer information</p>
</footer>
</article>
...more article stuff...
</div>
<footer>
<p>Copyright Info </p>
</footer>
</body>
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 .
<body>
<header></header>
<nav></nav>
<div class="main></div>
<footer></footer>
</body>
*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 W3.org
Next see: The Division Tag and the Section Element