How to Denote Site Navigation with HTML5

The following excerpt from HTML5: Up and Running is a brief look at adjusting web navigation with HTML5 to better use its new capabilities.

---

One of the most important parts of any website is the navigation bar. CNN.com has “tabs” along the top of each page that link to the different news sections—“Tech,” “Health,” “Sports,” etc. Google search results pages have a similar strip at the top of the page enabling you to try your search in different Google services—“Images,” “Video,” “Maps,” etc. And our example page has a navigation bar in the header that includes links to different sections of our hypothetical site—“home,” “blog,” “gallery,” and “about.”

This is how the navigation bar was originally marked up:

<div id="nav">
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">blog</a></li>
    <li><a href="#">gallery</a></li>
    <li><a href="#">about</a></li>
  </ul>
</div>

Again, this is valid HTML5. But while it’s marked up as a list of four items, there is nothing about the list that tells you that it’s part of the site navigation. Visually, you could guess that by the fact that it’s part of the page header, and by reading the text of the links. But semantically, there is nothing to distinguish this list of links from any other.

Who cares about the semantics of site navigation? For one, people with disabilities. Why is that? Consider this scenario: your motion is limited, and using a mouse is difficult or impossible. To compensate, you might use a browser add-on that allows you to jump to (or jump past) major navigation links. Or consider this: your sight is limited, and you use a dedicated program called a “screenreader” that uses text-to-speech to speak and summarize web pages. Once you get past the page title, the next important pieces of information about a page are the major navigation links. If you want to navigate quickly, you’ll tell your screenreader to jump to the navigation bar and start reading. If you want to browse quickly, you might tell your screenreader to jump over the navigation bar and start reading the main content. Either way, being able to determine navigation links programmatically is important.

So, while there’s nothing wrong with using <div id="nav"> to mark up your site navigation, there’s nothing particularly right about it either. It’s suboptimal in ways that affect real people. HTML5 provides a semantic way to mark up navigation sections—the <nav> element:

<nav>
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">blog</a></li>
    <li><a href="#">gallery</a></li>
    <li><a href="#">about</a></li>
  </ul>
</nav>

Ask Professor Markup Q: Are skip links compatible with the <nav> element? Do I still need skip links in HTML5? A: Skip links allow readers to skip over navigation sections. They are helpful for disabled users who use third-party software to read a web page aloud and navigate it without a mouse. Learn how and why to provide skip links at http://www.webaim.or...hniques/skipnav. Once screenreaders are updated to recognize the <nav> element, skip links will become obsolete, since the screenreader software will be able to automatically offer to skip over a navigation section marked up with the <nav> element. However, it will be a while before all the disabled users on the Web upgrade to HTML5-savvy screenreader software, so you should continue to provide your own skip links to jump over <nav> sections.