HTML Navigation

Understanding HTML Navigation

The HTML <nav> element identifies a section of a webpage containing major navigation links.

Navigation can help visitors move between important areas of a website or within a document, while the semantic <nav> element helps browsers and assistive technologies recognize the purpose of those links.

The <nav> Element

The <nav> element represents a section of a document whose purpose is to provide navigation links. It is intended for important groups of links rather than every collection of links on a webpage.

<nav>
  <a href="/">Home</a>
  <a href="/tutorials/">Tutorials</a>
  <a href="/contact.html">Contact</a>
</nav>

The links inside a navigation element can point to other webpages, different areas of a website, or locations within the current document.

Site Navigation

One of the most common uses of <nav> is a website's primary navigation. This usually provides links to the major sections or pages of the site.

<header>
  <h1>Example Website</h1>

  <nav>
    <a href="/">Home</a>
    <a href="/about.html">About</a>
    <a href="/tutorials/">Tutorials</a>
    <a href="/contact.html">Contact</a>
  </nav>
</header>

Primary navigation is often located inside a page header, but <nav> does not have to be a child of <header>. Its location should reflect the structure of the document.

Navigation Lists

Navigation links are often organized as a list because they represent a related group of navigation choices.

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about.html">About</a></li>
    <li><a href="/tutorials/">Tutorials</a></li>
    <li><a href="/contact.html">Contact</a></li>
  </ul>
</nav>

The <ul> describes the links as a group, while <nav> describes the purpose of that group as navigation. CSS can then display the list vertically, horizontally, or in another appropriate layout.

Page Navigation

The <nav> element can also identify important navigation within a long webpage, such as a table of contents or a group of links to major sections.

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

The fragment identifiers in the links correspond to id values elsewhere in the document, allowing visitors to jump directly to those sections.

Multiple Nav Elements

A webpage can contain more than one <nav> element when it has multiple important navigation areas. For example, a site might have primary navigation near the top of the page and a separate table of contents within the main content.

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

<main>
  <nav aria-label="On this page">
    ...
  </nav>
</main>

When several navigation regions appear on the same page, identifying their different purposes makes the document easier to understand and navigate.

Labeling Navigation

When a page contains multiple navigation regions, an accessible name can distinguish one from another. The aria-label attribute can provide that name when there is no visible heading that already labels the navigation.

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

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

Use labels that describe the purpose of the navigation, such as Primary navigation, On this page, or Footer navigation, rather than repeating the word navigation without additional meaning.

When Not to Use <nav>

Not every group of links needs a <nav> element. The element is intended primarily for major navigation areas rather than every link or small collection of related links.

<p>
  Read our
  <a href="/privacy.html">Privacy Policy</a>
  for more information.
</p>

A single link within a paragraph does not become navigation simply because it leads somewhere else. Use <nav> when the group of links serves a meaningful navigation purpose.

Navigation Accessibility

The semantic <nav> element can create a navigation landmark that assistive technologies can use to help people move through important regions of a webpage.

Use descriptive link text, maintain a logical keyboard focus order, and make keyboard focus visually apparent. When multiple navigation regions exist, distinguish them with meaningful labels when necessary.

Semantic navigation provides useful structure, but the links and any interactive menu behavior must also remain usable with a keyboard and other assistive technologies.

HTML Navigation Example

The following example demonstrates primary site navigation and a separate group of page navigation links. Compare the two <nav> elements and their labels, then experiment by adding or changing links.

Navigation Best Practices

• Use <nav> for major navigation areas rather than every group of links.
• Use descriptive link text that communicates where each link leads.
• Use lists when navigation links form a related group of choices.
• Use meaningful labels to distinguish multiple navigation regions when necessary.
• Keep navigation usable with a keyboard and provide visible keyboard focus.
• Keep navigation organization and terminology consistent across related webpages.
• Use CSS for the visual layout of navigation rather than changing its semantic structure solely for appearance.

Summary

The HTML <nav> element identifies a section containing major navigation links. It can be used for primary site navigation, tables of contents, important page navigation, and other groups whose purpose is to help visitors move through a website or document.

A webpage can contain multiple navigation regions when necessary. Semantic markup, meaningful labels, descriptive links, and accessible interaction all contribute to navigation that is easier for people and browsers to understand.