The nav Element

Learn how to use the <nav> element to semantically mark up major navigation sections, improving accessibility and SEO.

What it is

The <nav> element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. It is not intended for all groups of links, but rather for major navigation blocks such as site menus, table of contents, previous/next buttons, or breadcrumb trails.

Mental Model: Think of <nav> as a landmark region. Screen readers allow users to jump directly between these regions. If every link group were wrapped in <nav>, this utility would be lost due to noise.

Related terms: Landmark roles, ARIA labels, semantic HTML5.

Why it matters

• Accessibility: Users relying on screen readers can skip repetitive navigation blocks to reach main content quickly.
• SEO: Search engines better understand the structure and hierarchy of your site when navigation is explicitly marked.
• Clarity: Developers reading the code immediately identify which sections are primary navigation versus secondary footer links.
• Styling Hooks: Provides a clean CSS selector target without needing arbitrary classes like .main-nav.

Syntax or steps

1. Identify a major block of navigation links (e.g., header menu).
2. Wrap the entire block, including any headings or lists, in <nav>.
3. If multiple <nav> elements exist on one page, add an aria-label or aria-labelledby attribute to distinguish them.
4. Ensure the content inside consists primarily of links.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nav Example</title>
</head>
<body>
    <header>
        <nav aria-label="Main Navigation">
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <p>Page content goes here.</p>
    </main>

    <footer>
        <nav aria-label="Footer Links">
            <ul>
                <li><a href="/privacy">Privacy Policy</a></li>
                <li><a href="/terms">Terms of Service</a></li>
            </ul>
        </nav>
    </footer>
</body>
</html>

Explanation: The first <nav> contains the primary site menu. The second <nav> contains legal links in the footer. Both have unique aria-label values so assistive technology announces "Main Navigation" and "Footer Links" separately, preventing confusion.

Common mistakes

• Overusing <nav>: Wrapping every small list of links (like social icons) in <nav> creates clutter. Use it only for major blocks.
• Missing Labels: Having two unlabeled <nav> elements makes it impossible for screen reader users to know which is which. Always label if there is more than one.
• Nesting Navs: Do not place a <nav> inside another <nav>. This is invalid and confusing for parsers.
• Using Divs: Using <div class="nav"> instead of <nav> loses semantic meaning and accessibility benefits.

When to use it

Practice

Guided Exercise: Create a simple HTML page with a header containing a main menu and a sidebar containing a "Related Articles" list. Wrap both in <nav> tags and assign appropriate aria-label attributes.

Challenge: Add a "Skip to Content" link at the very top of the body. Should this be inside a <nav>? Why or why not? (Hint: Consider its purpose vs. standard navigation.)

Quick check

Q: Can you have multiple <nav> elements on a single page?

A: Yes, but each must be uniquely identified using aria-label or aria-labelledby to ensure accessibility.

Summary

The <nav> element is a powerful tool for defining major navigation landmarks in HTML5. By using it correctly and labeling multiple instances, you significantly enhance the experience for users with disabilities and improve machine readability of your site structure.