HTML and CSS Reference
In-Depth Information
To <nav> or not to <nav>?
The spec suggests that the “legal” links (copyright, contact, freedom
of information, privacy policies, etc.) that are often tucked away in the
footer should not be wrapped in a
<nav>
: “It is common for footers to
have a short list of links to various pages of a site, such as the terms
of service, the home page, and a copyright page. The footer element
alone is sufficient for such cases, without a nav element.”
We disagree with this suggestion. Many sites also include a link to
accessibility information that gives information such as how to request
information in alternate formats, and people who require such infor-
mation are those who would benefi t the most from user agents that
can take them directly to elements marked up as
<nav>
.
The contents of a
<nav>
element will probably be a list of links,
marked up as an unordered list (which has become a tradition
since Mark Newhouse's seminal “Taming Lists”
(
http://www.
alistapart.com/articles/taminglists/
)
or, in the case of bread-
crumb trails, an ordered list. Note that the
<nav>
element is a
wrapper; it doesn't replace the
<ol>
or
<ul>
element, but wraps
around it. That way, legacy browsers that don't understand the
element will just see the list element and list items and behave
themselves just fi ne.
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>Main navigation</h2>
<ul>
<li><a href=”/about”>About me</a></li>
<li><a href=”/news”>News</a></li>
</ul>
</nav>
