A Look at the HTML5 Nav Element

Key Takeaways

• The HTML5 Nav element, which represents a group of navigation links, is an important tool for enhancing website accessibility, as it allows screen readers to skip over site navigation, improving user experience for those with visual impairments.
• The Nav element can be used multiple times on a single page, for primary navigation bars and secondary links, and while it’s not mandatory for all navigation links, it’s recommended for major navigation blocks to improve site accessibility and SEO.
• While current screen readers may fail to recognize the Nav element, its use is encouraged as assistive technology continues to evolve, ensuring that websites remain accessible in the future.

It’s safe to assume that this element will appear in virtually every project. nav represents exactly what it implies: a group of navigation links. Although the most common use for nav will be for wrapping an unordered list of links, there are other options. You could also wrap the nav element around a paragraph of text that contained the major navigation links for a page or section of a page.

In either case, the nav element should be reserved for navigation that is of primary importance. So, it’s recommended that you avoid using nav for a brief list of links in a footer, for example.

nav and Accessibility

A design pattern you may have seen implemented on many sites is the “skip navigation” link. The idea is to allow users of screen readers to quickly skip past your site’s main navigation if they’ve already heard it—after all, there’s no point listening to a large site’s entire navigation menu every time you click through to a new page!

The nav element has the potential to eliminate this need; if a screen reader sees a nav element, it could allow its users to skip over the navigation without requiring an additional link. The specification states:
User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip and/or provide on request.

Current screen readers fail to recognize nav, but this doesn’t mean you shouldn’t use it. Assistive technology will continue to evolve, and it’s likely your page will be on the Web well into the future. By building to the standards now, you ensure that as screen readers improve, your page will become more accessible over time.

What’s a user agent?

You’ll encounter the term user agent a lot when browsing through specifications. Really, it’s just a fancy term for a browser—a software “agent” that a user employs to access the content of a page. The reason the specs don’t simply say “browser” is that user agents can include screen readers, or any other technological means to read a web page.

You can use nav more than once on a given page. If you have a primary navigation bar for the site, this would call for a nav element.

Additionally, if you had a secondary set of links pointing to different parts of the current page (using in-page anchors), this too could be wrapped in a nav element.

As with section, there’s been some debate over what constitutes acceptable use of nav and why it isn’t recommended in some circumstances (such as inside a footer). Some developers believe this element is appropriate for pagination or breadcrumb links, or for a search form that constitutes a primary means of navigating a site (as is the case on Google).

This decision will ultimately be up to you, the developer. Ian Hickson, the primary editor of WHATWG’s HTML5 specification, responded to the question directly: “use [it] whenever you would have used class=nav”.[See Comment]

This is an excerpt from HTML5 & CSS3 for the Real World, by Alexis Goldstein, Louis Lazaris & Estelle Weyl.

Looking for more tutorials?

If you would like to know more about the HTML5 NAV element, Sitepoint has a great range of online tutorials on HTML5 nav menus.

Building an Interactive Navigation Bar by Laura Athanasiou “A straightforward navigation structure can increase the usability of your site, and make information easy to find. By using basic HTML and CSS, you can build a horizontal nav bar that provides interaction when a user hovers over a navigation link.”

Creating an Animated Drop-down Navigation Menu in HTML5/CSS3 and Webkit by Jean-Pierre Gassin “This is a tutorial for beginner and intermediate HTML5 and CSS3 developers who want to create a drop-down menu. The menu we’re creating is animated using only CSS … there’s no JavaScript in sight!”

Build a Responsive, Mobile-Friendly Website From Scratch: Semantic HTML by Annarita Tranfici “First and foremost, let’s create a classic menu. In this case, the element most suitable for our purpose is the nav element, which is a semantic element used for declaring a navigational section of a website.”

Should Navigation Be Defined in Lists? by Craig Buckler “The question: are list elements necessary?”

How to Build a CSS3 Sliding Menu by Craig Buckler “In this article, we’re going to build a slide-out menu using CSS alone. If you’re using a modern browser, it will also show a lovely 3D page effect.”

Frequently Asked Questions about HTML5 Nav Element