Main Structure - Introducing HTML5 - page 17

While it makes sense to use a list (and it gives you more hooks
for CSS), it's not mandatory. This is perfectly valid:
<nav>
<p><a href=”/”>Home</a></p>
<p><a href=”/about”>About</a></p>
</nav>
Yo u c a n i n c l u d e h e a d i n g s f o r n a v i g a t i o n , t o o :
<nav>
<h2>Pages</h2>
<ul>
<li><a href=”/about”>About me</a></li>
<li><a href=”/news”>News</a></li>
</ul>

<h2>Categories</h2>
<ul>
<li><a href=”/happy”>Happy Pirates</a></li>
<li><a href=”/angry”>Angry Pirates</a></li>
</ul>
</nav>

Grouping <nav> and other
elements in a sidebar
Many sites have a sidebar that includes multiple blocks of navi-
gation and other non-navigation content. Take, for example, my
personal site www.brucelawson.co.uk ( Figure 1.8 ).
The sidebar on the left of the main content has one nav area
containing sublists for pages, categories, archives, and most
recent comments. In the irst edition of this topic, I recom-
mended that these be marked up as a series of consecutive
<nav> elements; I've changed my mind and now surround the
sublists with one overarching <nav> . (If you have two or more
blocks of important navigation that are not consecutive, by all
means use separate <nav> elements.)
All my main site navigation is contained in an <aside> element
that “can be used for typographical effects like pull quotes or
sidebars, for advertising, for groups of nav elements, and for
other content that is considered separate from the main content
of the page” ( http://dev.w3.org/html5/spec/semantics.html#
the-aside-element) .

FIguRE 1.8 My blog sidebar,
(once upon a time) mixing
navigation with colophon
information and pictures of
hunks.

NoTE Before you throw
down this topic in disgust
at my changing my mind, it's
important to emphasise that
there is rarely One True Way™ to
mark up content. HTML is a gen-
eral language without a million
elements to cover all eventuali-
ties (it just feels that way
sometimes)!