CreateaFreeWebsite
with Responsive Web Design

web Hosting
Menu

Header Element in HTML5

The Header Element or Tag has been introduced for producing better content structure in HTML5 documents:

The code:
<header></header>
Presents a group of introductory or navigational aids.

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

Note: We use to recommend placing an H1 tag in the header section. We would then use the H1 again for page titles. We were advised by Sitechecker that placing 2 H1 tags on the same page is a nono and confuses the already malformed search engines.

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

The Header Element should not be used with sections. Rather use the Hgroup Element.

Code examples:
The code below shows one instance of using a header element on a web page. The navigation device is nested within the header element.
<body>
<header>
<h1>Page Title</h1>
<nav>
<ul>
<li><a href="index.html">Index of all articles</a></li>
<li><a href="foo1.html">Article Link 1</a></li>
<li><a href="foo2.html">Article link 2</a></li>
</ul>
</nav>
</header>

Another acceptable option, where the nav element is placed before the header.
<body>
<nav>
<ul>
<li><a href="index.html">Index of all articles</a></li>
<li><a href="foo1.html">Article Link 1</a></li>
<li><a href="foo2.html">Article link 2</a></li>
</ul>
</nav>
<header>
<h1>Page Title</h1>
</header>

 

Notice that the Nav element can be nested inside the header or placed above or below it (Shown below). Both are accepted practices.

There are other ways to use the header element which you can pursue if interested.

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">
Text and pics here
</div>
<footer></footer>
</body>

The old way:

<body>
<div class="header"></div>
<div class="navigation"></div>
<div class="main">
Text and pics here
</div>
<div class="footer"></div>
</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 Header Element accepts Global Attributes.

For a complete list of New Elements visit W3.org Needs to be dummied down. But, they do have some good turorials.

 

See: The Division Tag and the Section Element or use the Next button for the next logical page, the Nav element.

 

Free Tools We Recommend

Free Ebook How to Code in HTML5 and CSS3
"How to Code in HTML5 and CSS3" is a free e-book about making websites in HTML5 and CSS for absolute beginners. It doesn't require any experience in IT to start....
If you are building a website for business you need to begin thinking about creating a brand identity. An unforgettable logo could be just the start you need. You can create it free at Turbologo.com. They also provide generators for business cards and letterheads.
FREE HTML Editor (Windows): NoteTab Light
All the features of a commercial HTML editor.
FREE Apache Server (Windows): IndigoAmpp
Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
Linux Users
If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the BlueFish HTML editor. You'll find it in your software repository. It does have some QUIRKS, but it's FREE.
For image resizing we've found the easiest Linux tool to be Krita.