HTML and CSS Reference
In-Depth Information
To <nav> or not to <nav>?
I was previously guilty of navitis—the urge to surround any links to other parts of a site as <nav>.
I cured myself of it by considering who will benefit from use of the
<nav>
element. We've previously spec-
ulated about a shortcut that would allow an assistive technology user to jump to navigation menus. If there
are dozens of <nav>s, it will make it hard for the user to find the most important ones. So I now advocate
marking up only the most important nav blocks, such as those that are site-wide (or section-wide) or tables
of contents for long pages.
A good rule of thumb is to use a
<nav>
element if you could imagine the links you're considering wrapping
having a heading “Navigation” above them. If they are important enough to merit a heading (regardless of
whether the content or design actually requires such a heading), they're important enough to be
<nav>
.
As the spec says, “Not all groups of links on a page need to be in a nav element—the element is primarily
intended for sections that consist of major navigation blocks.”
Conversely, the spec suggests that the “legal” links (copyright, contact, freedom of information, privacy
policies, and so on). that are often tucked away in the footer should not be wrapped in a
<nav>
: “It is com-
mon 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; while a nav ele-
ment can be used in such cases, it is usually unnecessary.”
We advise you to ignore what the spec says—use
<nav>
for these. Many sites also include a link to acces-
sibility information that explains how to request information in alternate formats, for example. Typically,
people who require such information are those who would benefit the most from user agents that can take
them directly to elements marked up as
<nav>
.
As with
<header>
s and
<footer>
s (and all of the new elements),
you're not restricted to one
<nav>
per page. You might very well
have site-wide
<nav>
in a header, a
<nav>
which is a table of con-
tents for the current article, and a
<nav>
below that which links
to other related articles on your site.
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 “CSS Design: Taming Lists”
(
http://www.alistapart.com/articles/taminglists/
)
or, in the case of
breadcrumb 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 fine.
