The HTML nav element identifies a major group of links that helps users move through a website or page. Use it for primary site navigation, a section menu, breadcrumbs, or an in-page table of contents when the group represents a meaningful navigation landmark.

The element describes the purpose of a link group, not its visual design. You can style the same semantic structure as a horizontal menu, sidebar, drawer, or mobile navigation without changing the markup.

What the HTML nav tag Represents

The HTML nav tag creates a navigation landmark for a collection of important links. Assistive technology can expose that landmark so people can move directly to major navigation areas instead of reading every link in document order.

Major navigation usually supports a broad movement task, such as moving between the main sections of a site, browsing categories, or jumping between the sections of a long article. Common examples include:

• A site-wide primary menu with links such as Home, Products, and Contact
• A section menu for related pages within a documentation or learning area
• An in-page menu linking to headings in a long article
• A breadcrumb trail showing the current page’s position in a hierarchy

Not every group of links needs a nav landmark. An isolated “Read more” link, a pair of related actions, or a small set of footer links may not represent major navigation. Avoid wrapping every isolated link or footer link group in nav without considering its navigational significance. Too many landmarks make page structure harder to scan, especially for people navigating by landmarks.

How to Mark Up a Primary HTML Navigation Menu

Place the primary menu near the site header when it represents the main route through the site. A list gives the links a clear group structure, while each anchor provides a specific destination. This complete example contains the nav element, an unordered list, and four links:

<nav aria-label=”Primary”>

  <ul>

    <li><a href=”/”>Home</a></li>

    <li><a href=”/services/”>Services</a></li>

    <li><a href=”/about/”>About</a></li>

    <li><a href=”/contact/”>Contact</a></li>

  </ul>

</nav>

The aria-label gives this landmark a concise name. Keep link text specific and meaningful when read on its own. The nav element does not require a list, but lists are often the clearest choice for a menu because they express that the links belong to one set. CSS can control spacing, alignment, dropdown behavior, and responsive presentation separately from this structure.

When to Use More Than One nav Element in HTML

A page can contain several navigation landmarks when each one serves a distinct purpose. For example, a header may contain the primary site menu, while the article contains an in-page contents menu. Both are valid because they help users navigate different scopes.

Give each landmark a distinct accessible name when more than one appears on the page. For example, use Primary navigation, Section navigation, or On this page rather than assigning the same generic label to every region:

• Primary navigation: links to the main areas of the website
• Section navigation: links to related pages within the current area
• On this page: links to headings in the current document

A visible heading or text label can also distinguish navigation regions for sighted readers. When the label needs to name the landmark for assistive technology, provide an accessible name such as an appropriate aria-label. Distinct names make landmark lists useful instead of forcing users to inspect each region.

How Lists, Labels, and Page Structure Clarify Navigation

Use one list item for each navigation destination, and keep the hierarchy aligned with the information architecture. A nested list can represent a submenu under a parent category. The visual design may hide or reveal that submenu, but the underlying relationships should remain understandable.

Keep navigation links in a logical order, starting with the most important or frequently used destinations. Use consistent wording between the menu label and the destination heading. For an in-page menu, link text such as Features or Pricing is clearer than repeated labels such as Read more.

In the phrase HTML navigation, the important distinction is semantic grouping: nav identifies a meaningful route through content, while lists organize the links within that route. Use both when they clarify the page, and leave smaller link groups as ordinary content when adding a landmark would not help users.