Apps

HTML5: Using structural elements for header, footer, and navigation

Ryan Boudreaux digs into the use of structural elements in the new HTML5 specification, specifically header, footer, and navigation elements, and gives examples of each.

The HTML5 specification has defined a set of sectional and structural elements that improves semantic markup within HTML coding for web developers. These new sectional and structural elements are a panacea for moving away from the common use of divisions or the <div> element that has taken over a large part of web page structures in recent years.

The sectional and structural elements include the header <header>, footer <footer>, and navigation <nav> elements which will be addressed in this segment. The article <article>, aside <aside>, section <section>, and headings group <hgroup> elements were explained in the previous post on HTML5: Using sectional elements.

The only rule for limiting the use of the <header> and <footer> elements is that they cannot be nested within another <header> or <footer> element. Other than that limitation, the use of these two elements is fairly open; examples of their utilization will be displayed for both.

Header <header>

This element represents a group of introductory or navigational aids for web pages. A <header> element is intended to contain the section's heading such as an <h1-h6> element or an <hgroup> element, but this is not required. 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.

The header element is not to be used for sectioning content as it is more of a structural element, and it does not introduce a new section. The <header> element 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.

<header> Example 1: The following snippet shows how the element is used to markup a page header.
<header>
  <hgroup>
    <h1>Gardening Times</h1>
    <h2>Getting started with flowers</h2>
  </hgroup>
</header>
<header> Example 2: In this example, the clip shows the <header> element nested within an <article> element.
<article>
  <header>
    <hgroup>
      <h1>Raising Roses</h1>
      <h2>The guide to a perfect rose garden</h2>
    </hgroup>
 </header>
</article>

At this time, 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:

address, article, aside, canvas,
figcaption, figure, footer, header,
hgroup, nav, section, summary {
display: block;
}

Footer <footer>

This element should be self explanatory at this point; however, the HTML5 <footer> element specification does state that it represents a footer for its nearest ancestor sectioning content or sectioning root element. The footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and social networking and sharing links, such as in a blog post. For this reason it is possible to have more than one <footer> element on a single web page document. The <footer> element does not introduce a new section, similar to the <header> element, but serves to add semantic meaning to the bottom of a <section> or <article>.

Several examples for use of the <footer> element are provided below:

<footer> Example 1: This example shows the <footer> element containing a published timestamp nested within an <article> element:
<article>
 <header>
  <h1>Example of a footer nested in an article</h1>
 </header>
  <p>This is the article content...</p>
  <p>...</p>
 <footer>
  <p>Published: <time datetime="2011-07-22T13:59:47-04:00" pubdate>July 22, 2011 1:59 pm EDT</time></p>
 </footer>
</article>
<footer> Example 2: This example shows a site wide <footer> element containing a navigation element:

<footer>

<nav>

<p><a href="/blog.html">Blog</a> -

<a href="/archive.html">Archive</a> -

<a href="/index.html">Home</a></P>

</nav>

<p>Copyright ©2011 Footer Examples</p>

</footer>

Navigation <nav>

This element, as the HTML5 specification requires, corresponds to a section of a web page that links to other web pages or to other parts within the web page; for example, a section with navigation links -- which seems self explanatory. What this means is that the <nav> element replaces the idea of having a <div id="nav"> element, with the new semantic element meant specifically as a navigation area. However, consider that not all groups of links on a web page need to be contained within a <nav> element; the element is primarily intended for sections that consist of major navigation blocks; in addition, the element can appear more than once on any given web page. A global site-wide navigation block and a secondary navigation block can be included on a single web page with individual attributes styled with an id or class designation.

The specification also notes that it is common for footers to have a short list of links to various pages of a site, such as the terms of service, a copyright or disclaimer page. The footer element alone is sufficient for such cases, and while a <nav> element can be used in such cases, it is usually unnecessary.

The specification goes on to state that user agents including screen readers that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use the <nav> element as a way to determine what content on the page to initially skip and/or provide on request.

Typically, the <nav> element can be found within the <header> structural element, which will be reviewed in the next installment on HTML5 coding practices. The contents of links within the <nav> element do not necessarily have to be presented in list form, but can also contain other kinds of content as well, including links within a paragraph block. Several examples of the <nav> element are presented below:

<nav> Example 1: Content linking presented within an unordered list
<h1>The Blog of Examples</h1>
  <nav>
   <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#/events">Events</a></li>
     <li><a href="#/Blog">Blog</a></li>
     <li><a href="#/Products">Products</a></li>
   </ul>

</nav>

<nav> Example 2: Linking content within a paragraph block
<nav>
  <h1>Navigation</h1>
   <p>This is the home page, just below you will find <a href="/blog">The
   Blog</a>, where much ado about something can be found. Just to the right of
   that you will find the <a href="/wiki">Wiki</a>. And continuing
   the path to your left you will find the <a href="/wiki/papers">Wiki Papers</a>.</p>
</nav>      

Coming up

Future segments on HTML5 will explore more elements including the canvas <canvas> element, the audio <audio> element, the video <video> element, the figure <figure> element, the figure caption <figcaption> element, and more.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

3 comments
ShoebSiddique
ShoebSiddique

In HTML 4 we were using heading tags in the descending order, ex. h1, h2, h3. I am here to ask that in HTML 5 i have to go in the same way or i can use heading tag in this format, h1, h2, h3, h2, h4, h3.

l_e_cox
l_e_cox

I enjoy working with the new HTML and have started using it extensively for personal projects. And I would guess that if you are developing for mobile devices, you will have minimal problems with HTML5. But regular desktop browsers, even the most recent ones, don't implement all the new features. So if you are a mainstream web developer you really have to know your way around browser compatibility.

Spitfire_Sysop
Spitfire_Sysop

If you want to use these new elements but are afraid of them not working there is a simple plug-in that will add these elements to old versions of CSS. I have viewed my new pages in an older browser only to find that the new elements are completely ignored, leaving my content without style! Here is a temporary solution until the world catches up with us: http://code.google.com/p/html5shim/ It's a little JavaScript file that you include in your header. It puts all of the new HTML5 elements in to the CSS table so that your code can be loaded in to them just like they were "classes" or "IDs". The example given has an lte IE9 hack on it but you can use this code for all of the older browsers. I have tested it and it works as advertised. So go forth and code without fear of disgraceful degredation.

Editor's Picks