HTML <nav> Element
The HTML <nav> element represents a section of navigation links that help users move to other pages or to different sections within the current page.
Syntax
<nav>
<a href="/">Home</a>
<a href="/about.html">About</a>
<a href="/contact.html">Contact</a>
</nav>The <nav> element requires both an opening and closing tag. Navigation links are placed inside the element, often using <a> elements directly or within a list.
Attributes
The <nav> element supports the global HTML attributes. It does not have any element-specific attributes.
Example
This example uses the <nav> element to group several links that make up the main navigation for a simple website.
Usage Notes
Use the <nav> element for major navigation sections, such as a site's primary navigation, a table of contents, page navigation, or links that move between important sections of a document.
Not every group of links needs to be placed inside a <nav> element. A small group of incidental links, such as links within a paragraph or a group of footer links that are not considered major navigation, can remain outside <nav>.
A webpage can contain more than one <nav> element when it has multiple meaningful navigation areas, such as primary site navigation and an On This Page menu.
Accessibility
The <nav> element creates a navigation landmark that can help users of assistive technologies move quickly between important navigation sections.
When a page contains more than one <nav> element, give each navigation area a meaningful accessible label so users can distinguish them. For example, aria-label="Primary navigation" and aria-label="On this page" can identify their different purposes.
Use descriptive link text that clearly communicates where each navigation link leads. Avoid relying on vague text such as "Click here" when a more meaningful link name can be provided.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <nav> Element .
Related Elements
The <nav> element is commonly used with the <a> element for navigation links, the <ul> and <li> elements for navigation lists, and structural elements such as <header> and <footer>.