Lesson 1: Thinking HTML5 semantics CHAPTER 5 211
<footer>
<ul>
<li>Copyright (C) 2012, Contoso Ltd., All rights reserved</li>
<li><a href="default.html">Home</a></li>
</ul>
</footer>Using the <nav> element
The <nav> element in Figure 5-3 replaces the <div id=”menu”> element in Figure 5-2, which
provides a section meaning to browsers and devices. The <nav> element wraps a group of
major links that are on your page. Menus are the most common candidates for the <nav>
element.
Like menus, footers commonly have groups of links, but you don’t need to use the <nav>
element if you are using the <footer> element, and the <nav> element is not required for
links within your content. You can have many <nav> elements in an HTML document. For
example, in addition to the menu that is normally on the left side or across the top of the
page, you might have a group of links above the footer that link to the next page of blog
posts or to other major areas of your site.
Think of a screen reader when implementing the <nav> element. It will be looking for the
primary navigation area on the webpage so it can present these links to the user as menu
items that have links to other areas within the current website. Links to off-site locations
should not be part of the <nav> element. Footer links to secondary areas of your website also
don’t require a <nav> element.Using the <aside> element
The <aside> element in Figure 5-3 replaces the <div id=”advertise”> element in Figure 5-2,
which provides a section meaning to browsers and devices.
The <aside> element wraps secondary content when used for sidebars. In many cases, this
is where the advertising and other site-related content goes. In addition, when the <aside>
element is in an article, it should contain content tangentially related to the content within
the article. The use of the <aside> element differs based on the context, as shown in the fol-
lowing example.
<body>
<header>
<h1>Blogging for fun</h1>
</header>
<article>
<h1>Blog of the day</h1>
<p>This is today's blog post. La, la, la, la, la,
la, la, la, la, la, la</p>
<aside>
<!-- Inside the article, so it's related to the article -->
<h1>What's this all about?</h1>
<p>This article talks about la, la...</p>
</aside>