The <nav> Element
As defined in the HTML Living Standard, the <nav> element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
View HTML Living Standard: The nav element
Accessibility Landmark: navigation
The <nav> element is programmatically identified as a navigation landmark.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
By wrapping your primary links in a <nav> element, you allow screen reader users to jump directly to the site navigation using landmark navigation commands. This provides a clear, high-level map of the document's interactive structure.
Handling Multiple Navigation Areas
A page often has more than one navigation area (e.g., a primary header nav and a secondary sidebar nav). To ensure clarity, every <nav> landmark should be uniquely identifiable.
A11y Requirement: Accessible Names
When multiple <nav> elements are used, provide each with an aria-label or aria-labelledby attribute. This prevents screen readers from simply announcing "Navigation landmark" twice, which can be confusing.
<nav aria-label="Primary">...</nav>
<nav aria-label="Footer">...</nav>
When to use (and when not to)
- Major Navigation: Use it for the primary menu, table of contents, breadcrumbs, or pagination.
- Lists of Links: Not every list of links needs a
<nav>. For example, a small group of social media links in a footer is usually better placed in a simple<ul>or<footer>. - Semantic Check: If the links constitute "major" navigation for the site or current document, use
<nav>.
A11y Tip: Logical List Structure
It is best practice to place a <ul> inside your <nav> element. This informs screen reader users of the number of links in the menu, allowing them to better manage their cognitive load when deciding whether to explore the navigation.