HTML5: Using structural elements for header, footer, and navigation
Takeaway: The use of structural elements in the new HTML5 specification, specifically header, footer, and navigation elements, and 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>
*********************
In less than a week, thousands of reporters, vendors, and technology enthusiasts will descend on Las Vegas for CEA’s International Consumer Electronics Show 2012. As hardware manufactures show off their latest creations, a few trends always emerge. Last year, it was tablets. The year before, 3D TVs were all the rage. So what will be this year bring?
