HTML nav Element: How to Mark Up Site Navigation

The nav element defines a section of a page that contains major navigation links. It helps browsers, search engines, and assistive technologies understand which links are for moving around the site or page, rather than just being ordinary links.

Quick answer: Use nav for the main blocks of navigation on a page, such as primary menus, table of contents links, breadcrumbs, or pagination. Do not wrap every group of links in nav—only the important navigation regions.

Difficulty: Beginner

You'll understand this better if you know: basic HTML elements, how links work with a tags, and the idea of semantic HTML.

1. What Is the HTML nav Element?

The nav element is a semantic HTML5 landmark used to group links that help users move through a website or a large section of a page. It does not create navigation by itself; it only identifies a block of links as navigation.

It is a sectioning landmark for navigation content.
It usually contains one or more a elements.
It is meant for major navigation, not every small set of links.
It improves structure for screen readers and other assistive tools.

In practice, nav often appears in headers, sidebars, footers, or near the top of content pages. A page can have more than one nav element if each one represents a distinct navigation area.

2. Why nav Matters

Navigation is one of the most important parts of a page. Users need a fast way to find the main sections of a site, and semantic markup makes that easier for both humans and software.

The nav element matters because it:

Improves accessibility by giving assistive technology a clear navigation landmark.
Clarifies page structure for developers reading the markup.
Helps distinguish navigation from ordinary grouped links, such as legal links or related articles.
Makes pages easier to scan, especially when there are multiple link groups.

You should use nav when the links are part of the site’s core navigation system or a major in-page navigation aid. You should not use it for every list of links, because overusing landmarks reduces clarity instead of improving it.

3. Basic Syntax or Core Idea

The nav element wraps a set of navigation links. The links themselves are still normal anchor tags.

Minimal example

This example shows the simplest useful structure: a navigation landmark containing a list of links.

<nav aria-label="Primary">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

The aria-label gives the navigation a useful name when there is more than one navigation landmark on the page. The list is optional, but it is a common and readable way to group navigation links.

4. Step-by-Step Examples

Example 1: Main site navigation

For a typical website header, the primary menu belongs in nav. This is the most common use case.

<header>
  <nav aria-label="Main">
    <ul>
      <li><a href="/products">Products</a></li>
      <li><a href="/pricing">Pricing</a></li>
      <li><a href="/support">Support</a></li>
    </ul>
  </nav>
</header>

This pattern clearly separates the site’s main navigation from the rest of the page content.

Example 2: Table of contents for an article

A long article can use nav for its internal table of contents, because the links help users jump to major sections.

<nav aria-label="Table of contents">
  <ol>
    <li><a href="#introduction">Introduction</a></li>
    <li><a href="#examples">Examples</a></li>
    <li><a href="#faq">FAQ</a></li>
  </ol>
</nav>

Using an ordered list can make sense when the sections follow a sequence, but an unordered list is also fine if order is not important.

Example 3: Breadcrumb navigation

Breadcrumbs help users understand where they are in a site hierarchy. They are a good fit for nav because they are a navigational aid, not just decoration.

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/docs">Docs</a></li>
    <li>HTML nav Element</li>
  </ol>
</nav>

The current page does not need to be a link. It can be plain text if it represents the user’s current location.

Example 4: Pagination links

Pagination controls often belong in nav because they move users between pages in a sequence.

<nav aria-label="Pagination">
  <ul>
    <li><a href="/blog?page=1">1</a></li>
    <li><a href="/blog?page=2" aria-current="page">2</a></li>
    <li><a href="/blog?page=3">3</a></li>
  </ul>
</nav>

The aria-current="page" attribute shows which page is active, which is useful for accessibility and clarity.

5. Practical Use Cases

Use nav when the links serve an actual navigation purpose. Common situations include:

Primary site menus in a page header.
Sidebar menus for documentation, settings, or account sections.
Breadcrumb trails for hierarchical websites.
Table of contents blocks in long articles or docs.
Pagination controls for search results, blog archives, or galleries.

Do not use nav just because a group contains multiple links. For example, a footer with privacy policy, terms, and contact links may be a navigation area on some sites, but a very small set of utility links can also be left as plain content if it is not part of the main navigation structure.

6. Common Mistakes

Mistake 1: Wrapping every link group in nav

New developers often assume that any collection of links should be placed inside nav. That makes the document noisy and reduces the meaning of the landmark.

Problem: This page has too many navigation landmarks, including links that are not really navigation, so assistive technology users get an unhelpful list of landmarks.

<nav>
  <a href="/">Home</a>
</nav>

<nav>
  <a href="/privacy">Privacy Policy</a>
  <a href="/terms">Terms</a>
</nav>

Fix: Reserve nav for major navigation areas and keep minor or unrelated links outside it when appropriate.

<nav aria-label="Primary">
  <a href="/">Home</a>
</nav>

<footer>
  <a href="/privacy">Privacy Policy</a>
  <a href="/terms">Terms</a>
</footer>

The corrected version works better because the primary navigation remains easy to find, while the footer links stay in their natural place.

Mistake 2: Using nav for non-link content

The nav element should contain navigation links or link-like navigation content, not general content such as headings, paragraphs, or product cards.

Problem: This markup misuses the navigation landmark for content that is not navigation, which can confuse both users and accessibility tools.

<nav>
  <h2>Popular Articles</h2>
  <p>Read our latest guides and tutorials.</p>
</nav>

Fix: Use a sectioning element such as section or aside if the content is informational rather than navigational.

<section>
  <h2>Popular Articles</h2>
  <p>Read our latest guides and tutorials.</p>
</section>

The corrected version works because it uses a landmark that matches the actual content.

Mistake 3: Forgetting accessible labels when there are multiple navs

When a page has more than one nav, each one should be identifiable. Otherwise, screen reader users may hear several identical “navigation” landmarks.

Problem: These landmarks are not labeled, so a user cannot easily tell primary navigation from breadcrumb navigation or pagination.

<nav>
  <a href="/">Home</a>
</nav>

<nav>
  <a href="/docs">Docs</a>
</nav>

Fix: Add an accessible name with aria-label or connect a visible heading with aria-labelledby.

<nav aria-label="Primary">
  <a href="/">Home</a>
</nav>

<nav aria-label="Documentation">
  <a href="/docs">Docs</a>
</nav>

The corrected version works because each landmark now has a clear purpose.

7. Best Practices

Practice 1: Use descriptive labels for multiple nav regions

If your page has more than one navigation area, name each one clearly. This helps keyboard and screen reader users move through the page efficiently.

<nav aria-label="Primary">...</nav>
<nav aria-label="Footer">...</nav>

Clear labels make landmarks more useful, especially on large sites with several menus.

Practice 2: Prefer lists for grouped navigation links

A list communicates that the links belong together. It also makes it easier to count items, style menus consistently, and support accessibility tools.

<nav aria-label="Main">
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/docs">Docs</a></li>
  </ul>
</nav>

This structure is not required by HTML, but it is a strong semantic pattern.

Practice 3: Keep navigation focused and compact

Navigation should help users move, not overwhelm them. If a menu becomes huge, consider splitting it into sections or using a different structure.

<nav aria-label="Account">
  <ul>
    <li><a href="/account/profile">Profile</a></li>
    <li><a href="/account/security">Security</a></li>
  </ul>
</nav>

Smaller, task-focused navigation is easier to scan and maintain.

8. Limitations and Edge Cases

nav is a semantic landmark, but it does not provide any built-in styling or behavior.
You can have more than one nav on a page, but too many unlabeled ones become confusing.
Not every footer link list needs to be inside nav; whether it should be treated as navigation depends on importance and context.
A single link alone usually does not need nav; wrapping one link in a navigation landmark is often unnecessary.
Some screen readers expose landmarks differently depending on browser and assistive technology combinations, so accessible labels matter more than layout assumptions.

If a link group is purely decorative or supplemental, semantic containers like div, section, or aside may be more appropriate than nav.

9. Practical Mini Project

Here is a small but complete page skeleton that uses nav in two places: a primary menu and a table of contents. This is a realistic pattern for a documentation or content site.

<header>
  <h1>Acme Docs</h1>
  <nav aria-label="Primary">
    <ul>
      <li><a href="/guide">Guide</a></li>
      <li><a href="/api">API</a></li>
      <li><a href="/support">Support</a></li>
    </ul>
  </nav>
</header>

<main>
  <nav aria-label="Table of contents">
    <ol>
      <li><a href="#overview">Overview</a></li>
      <li><a href="#install">Install</a></li>
      <li><a href="#configure">Configure</a></li>
    </ol>
  </nav>

  <section id="overview">
    <h2>Overview</h2>
    <p>This section explains the product at a high level.</p>
  </section>
</main>

This example shows a clean structure: the primary links identify the site, and the table of contents helps users jump within the page.

10. Key Points

The nav element marks major navigation regions.
It should contain meaningful links that help users move around the site or page.
Use accessible labels when a page has more than one navigation area.
Lists are a common and readable way to organize navigation links.
Do not overuse nav for every group of links.

11. Practice Exercise

Create a page with three navigation areas: a primary menu, a breadcrumb trail, and a table of contents.
Make sure each nav has a clear accessible name.
Use lists to group the links.

Expected output: A semantic HTML page with distinct navigation landmarks that a screen reader can identify separately.

Hint: Use aria-label values such as “Primary”, “Breadcrumb”, and “On this page”.

<header>
  <nav aria-label="Primary">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/docs">Docs</a></li>
    </ul>
  </nav>
</header>

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/docs">Docs</a></li>
    <li>HTML nav Element</li>
  </ol>
</nav>

<nav aria-label="On this page">
  <ul>
    <li><a href="#intro">Introduction</a></li>
    <li><a href="#examples">Examples</a></li>
  </ul>
</nav>

The completed solution uses the same semantic pattern in three different navigation contexts, while keeping each region understandable and accessible.

12. Final Summary

The HTML nav element is a semantic landmark for major navigation areas. It does not change how links behave, but it gives meaning to groups of links so browsers and assistive technologies can recognize them as navigation.

Used well, nav makes layouts clearer, improves accessibility, and helps organize menus, breadcrumbs, pagination, and in-page tables of contents. The key is to use it intentionally: label multiple navigation regions, keep the content truly navigational, and avoid wrapping every link group in a landmark.

Next, learn how header, main, aside, and footer work together with nav to create a strong semantic page structure.