Nav Element

title: "The Nav Element — Semantic HTML for Navigation Landmarks" description: "Learn how the HTML nav element defines navigation regions, provides a screen reader landmark, and improves keyboard navigation for site menus." weight: 2 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, navigation]

The HTML nav element semantically marks navigation regions, creating a landmark that screen reader users can jump to directly.

## What You'll Learn

How to use the nav element correctly, when to use it, and how it interacts with other landmark elements on the page.

## Why It Matters

The nav element creates a navigation landmark in the browser's accessibility tree. Screen reader users use landmark navigation (NVDA Numpad Insert + F7, VoiceOver rotor) to jump directly to navigation.

## Real-World Use

A screen reader user lands on a documentation page. They open the element list, select "Navigation Landmarks," and jump to the main navigation. From there they browse to the Getting Started guide without tabbing through 50 links.

## Nav Element Usage

```html
<!-- Primary navigation -->
<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<!-- Breadcrumb navigation -->
<nav aria-label="Breadcrumbs">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li aria-current="page">Accessories</li>
  </ol>
</nav>

Multiple Navigation Regions

<nav aria-label="Main" class="main-nav">...</nav>
<nav aria-label="Footer" class="footer-nav">...</nav>
<nav aria-label="Breadcrumb" class="breadcrumbs">...</nav>

Common Mistakes

1. Wrapping all link groups in nav

Only wrap primary and secondary navigation blocks. A list of links in an article is not necessarily a nav.

2. No aria-label on multiple nav elements

Multiple nav elements without labels are indistinguishable in screen reader landmark navigation.

3. Using nav for pagination links

Pagination can use nav if it represents navigational page links, but a simple list may suffice.

4. Nesting nav elements

Do not nest nav inside nav. Each nav is a separate landmark.

5. Using div with role=navigation instead

The nav element is preferred. Only use role=navigation if you cannot use the HTML element.

Practice Questions

1. What ARIA landmark does the nav element create? It creates a navigation landmark in the accessibility tree.

2. How does a screen reader user navigate to nav landmarks? Using the element list (Insert + F7 in NVDA) or the rotor (VoiceOver) to list landmarks.

3. Should every set of links be wrapped in nav? No. Only major navigation blocks should use nav. A list of related articles in a sidebar is not navigation.

Challenge: Take a page with three navigation regions (main menu, breadcrumbs, footer links). Add nav elements with unique aria-labels and verify screen reader landmark navigation works.

FAQ

Mini Project

Audit an existing page and identify all navigational regions. Add nav elements with appropriate aria-labels. Test with the NVDA element list (Insert + F7) to verify landmarks appear correctly.

What's Next

Learn about Skip Links and how they help users bypass repetitive navigation to reach main content.