References

Beginner-friendly references for web development, with live, editable examples.

The HTML <nav> tag

Element All modern browsers Updated
Quick answer

The HTML <nav> element marks a block of major navigation links — a main menu, a table of contents, breadcrumbs. It is a navigation landmark that lets screen-reader users jump straight to (or skip) the navigation. Not every group of links needs a <nav>.

Overview

The <nav> element identifies a block of major navigation links. Browsers expose it to assistive technology as a navigation landmark, which lets keyboard and screen-reader users jump straight to it — or skip past it — instead of wading through every link. That single piece of semantics is a real usability win.

Reserve it for primary navigation: the main site menu, breadcrumbs, pagination, or an on-page table of contents. Not every group of links needs one — a few links inside a paragraph, or the handful in a <footer>, are fine as a plain list. Overusing <nav> dilutes its value by creating landmarks that are not worth navigating to.

When a page has more than one <nav> — say a primary menu and a footer menu — give each an accessible name with aria-label (for example "Primary" and "Footer") so they can be told apart in the landmarks list. Inside, mark the links up as a <ul> so their number is announced.

Syntax

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

Example

Live example 
<nav aria-label="Primary">
  <a href="#" aria-current="page">Home</a> &middot;
  <a href="#">Docs</a> &middot;
  <a href="#">About</a>
</nav>

Best practices

  • Reserve <nav> for major navigation — site menus, breadcrumbs, pagination — not every group of links.
  • Give each <nav> on a page a unique accessible name with aria-label so they are distinguishable.
  • Put the links in a <ul> so assistive technology announces how many there are.
  • Mark the current page in the nav with aria-current="page" so users know where they are.

Accessibility

The <nav> landmark lets screen-reader users jump to or skip navigation. Label multiple navs with aria-label, mark the current page link with aria-current="page", and provide a skip link for keyboard users.

Frequently asked questions

When should I use the nav element?
For major navigation blocks only — the main menu, breadcrumbs, pagination or a table of contents. A few links in body text or a footer do not need it.
Can a page have more than one nav?
Yes. Give each one an accessible name with aria-label (e.g. "Primary", "Footer") so they can be distinguished.
Do footer links need a nav element?
Not necessarily. A short list of footer links can be a plain <ul>; reserve <nav> for navigation that is worth jumping to as a landmark.
Should nav contain a list?
Yes, usually. Wrapping the links in a <ul> lets screen readers announce how many links there are.
meter noscript