<nav>

Overview

The <nav> element signifies a section on a webpage specifically designed for navigation. It's commonly used to hold primary navigation links, such as site menus or tables of contents. While other elements can also contain links, the <nav> element explicitly communicates the primary navigation role to both developers and assistive technologies.

Examples and Usage

The <nav> element is instrumental in helping users navigate around a site or within a page. It's worth noting that not every set of links requires a <nav> wrapper. For instance, while main site navigation benefits from being inside a <nav>, a footer with a few secondary links might not necessitate it.

Consider the following scenario:

<nav>
  <h2 id="main-navigation">Main Navigation</h2>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact Us</a></li>
  </ul>
</nav>
<footer>
  <ul>
    <li><a href="#privacy">Privacy Policy</a></li>
    <li><a href="#terms">Terms of Service</a></li>
  </ul>
</footer>

In our illustrative example, the primary navigation links are encapsulated within the <nav> element. The structure uses a list (<ul>) to group the links, providing an organized and easily navigable format. The footer, while containing links, does not use the <nav> element as its links are secondary and not part of the main navigation. It's a common practice to use lists within navigation elements to offer a clear hierarchy and structure to the links.

Outside of basic navigation structures like the one shown, <nav> can encompass more intricate arrangements, such as dropdown menus or nested lists, to facilitate deeper site hierarchies. In responsive designs, the content within <nav> often transforms to accommodate varying screen sizes, like collapsing into "hamburger" menus on mobile devices.

Attribute Breakdown

The <nav> element doesn't have any specific attributes; it uses the global attributes applicable to all HTML elements.

Accessibility Aspects

When considering accessibility for the <nav> element:

• Assistive tools, like screen readers, can use the <nav> element to offer users the option to skip repetitive navigation links.

• When multiple <nav> elements are present, differentiation becomes crucial. A site might have one <nav> for primary site-wide navigation and another for in-page navigation. Using the aria-labelledby attribute can help screen readers and other assistive technologies identify and describe each navigation section distinctly.

• By default, the ARIA role of role=navigation is associated with the <nav> element. Depending on the navigation type, roles like menu, menubar, and tablist can also be relevant.

Associated Elements

• <address>
• <article>
• <aside>
• <footer>
• <header>
• <h1> - <h6>
• <hgroup>
• <section>

Additional Notes

• Using lists (<ul> or <ol>) within the <nav> element aids in providing a clear structure, making it easier for users to parse and understand the navigation.

• While JavaScript can introduce dynamic behaviors (e.g., dropdown menus) to navigation, it's advisable to make sure navigation remains functional even if JavaScript is disabled.

• Semantically correct usage of the <nav> element can benefit SEO by providing search engines with a clear structure of the site's navigation.

• It's not uncommon to see multiple <nav> elements on a single page, especially in complex web applications or sites with extensive content. Regardless, it's critical to ensure each serves a distinct purpose, such as top-level site navigation versus in-page content navigation.

Browser Compatibility

For a detailed breakdown of specific browser nuances and older version support, refer to the first link in the Useful Resources below.

Useful Resources

Can I use HTML element: nav

The HTML Living Standard Specification: nav