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.
Visual Example:
<nav>\n <ul>\n <li><a href="/home">Home</a></li>\n </ul>\n</nav>
View HTML Living Standard: The nav element
Accessibility & Landmarks
The <nav> element is a landmark. This allows screen reader users to quickly find the navigation and jump over it to reach the main content.
- Not All Links Need Nav: Do not wrap every group of links in a
<nav>. Reserve it for major navigation blocks (main menu, footer links, breadcrumbs). - Labeling: If you have multiple
<nav>elements on a page, usearia-labeloraria-labelledbyto distinguish them (e.g.,aria-label="Primary"andaria-label="Footer").
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
Using <nav> ensures that the purpose of the link group is programmatically identified as navigation.