<nav>

The nav element is a semantic block element used to group navigation links for a website. It is commonly used for main navigation menus, breadcrumb trails, and tables of contents.

Syntax

<!-- Global navigation -->
<nav>
  <ul>
    <li><a href="/?lang=en">Home</a></li>
    <li><a href="/about.html?lang=en">About</a></li>
    <li><a href="/contact.html?lang=en">Contact</a></li>
  </ul>
</nav>

<!-- Use aria-label to distinguish multiple nav elements -->
<nav aria-label="Breadcrumb">
  <a href="/?lang=en">Home</a> > <a href="/products/?lang=en">Products</a> > Detail Page
</nav>

Main Attributes

Attribute	Description
aria-label	Communicates the purpose of the navigation to screen readers. When a page has multiple `nav` elements, this attribute distinguishes them — for example, "Global Navigation" vs. "Breadcrumb".
id / class	Used to apply CSS styles or manipulate the element with JavaScript.

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    /* Global navigation styles */
    nav ul {
      list-style: none;
      display: flex;
      gap: 16px;
      padding: 0;
      margin: 0;
    }
    nav a {
      text-decoration: none;
      color: #333;
      padding: 8px 12px;
    }
    nav a:hover {
      background: #eee;
      border-radius: 4px;
    }

    /* Breadcrumb */
    .breadcrumb a {
      color: #666;
    }
  </style>
</head>
<body>

  <!-- Global navigation -->
  <nav aria-label="Global Navigation">
    <ul>
      <li><a href="/?lang=en">Home</a></li>
      <li><a href="/tutorial.html?lang=en">Tutorial</a></li>
      <li><a href="/dictionary.html?lang=en">Dictionary</a></li>
      <li><a href="/contact.html?lang=en">Contact</a></li>
    </ul>
  </nav>

  <!-- Breadcrumb -->
  <nav class="breadcrumb" aria-label="Breadcrumb">
    <a href="/?lang=en">Home</a> >
    <a href="/dictionary.html?lang=en">Dictionary</a> >
    <span>HTML Dictionary</span>
  </nav>

  <!-- Table of contents -->
  <nav aria-label="Table of Contents">
    <ul>
      <li><a href="#section1">1. Introduction</a></li>
      <li><a href="#section2">2. Usage</a></li>
      <li><a href="#section3">3. Summary</a></li>
    </ul>
  </nav>

</body>
</html>

Result

The global navigation is displayed as a horizontal menu using Flexbox. The breadcrumb trail appears as "Home > Dictionary > HTML Dictionary".

[Home] [Tutorial] [Dictionary] [Contact]

Home > Dictionary > HTML Dictionary

Table of Contents:
  · 1. Introduction
  · 2. Usage
  · 3. Summary

Overview

The nav element is one of the semantic elements introduced in HTML5. Assistive technologies such as screen readers recognize nav elements on the page, allowing users to jump directly to navigation sections. It is an important element that contributes not only to visual design but also to improved accessibility.

You do not need to wrap every group of links in a nav element. Use it only for major navigation blocks. It is not required for minor link groups in footers, lists of external links, or single in-page links. A good rule of thumb is to ask: "Is this navigation important for understanding the site's structure?"

When a page has multiple nav elements, it is recommended to use the aria-label attribute to clarify the purpose of each one. This allows screen reader users to distinguish between "Global Navigation," "Breadcrumb," and "Table of Contents." It is common practice to structure links inside a navigation using ul and li elements for a proper list structure.