<nav> element signifies a section on a webpage specifically designed for navigation. It's commonly used to hold primary navigation links, such as site menus or tables of contents. While other elements can also contain links, the
<nav> element explicitly communicates the primary navigation role to both developers and assistive technologies.
Examples and Usage
<nav> element is instrumental in helping users navigate around a site or within a page. It's worth noting that not every set of links requires a
<nav> wrapper. For instance, while main site navigation benefits from being inside a
<nav>, a footer with a few secondary links might not necessitate it.
Consider the following scenario:
In our illustrative example, the primary navigation links are encapsulated within the
<nav> element. The structure uses a list (
<ul>) to group the links, providing an organized and easily navigable format. The footer, while containing links, does not use the
<nav> element as its links are secondary and not part of the main navigation. It's a common practice to use lists within navigation elements to offer a clear hierarchy and structure to the links.
Outside of basic navigation structures like the one shown,
<nav> can encompass more intricate arrangements, such as dropdown menus or nested lists, to facilitate deeper site hierarchies. In responsive designs, the content within
<nav> often transforms to accommodate varying screen sizes, like collapsing into "hamburger" menus on mobile devices.
<nav> element doesn't have any specific attributes; it uses the global attributes applicable to all HTML elements.
When considering accessibility for the
Assistive tools, like screen readers, can use the
<nav>element to offer users the option to skip repetitive navigation links.
<nav>elements are present, differentiation becomes crucial. A site might have one
<nav>for primary site-wide navigation and another for in-page navigation. Using the
aria-labelledbyattribute can help screen readers and other assistive technologies identify and describe each navigation section distinctly.
By default, the ARIA role of
role=navigationis associated with the
<nav>element. Depending on the navigation type, roles like
tablistcan also be relevant.
Using lists (
<ol>) within the
<nav>element aids in providing a clear structure, making it easier for users to parse and understand the navigation.
Semantically correct usage of the
<nav>element can benefit SEO by providing search engines with a clear structure of the site's navigation.
It's not uncommon to see multiple
<nav>elements on a single page, especially in complex web applications or sites with extensive content. Regardless, it's critical to ensure each serves a distinct purpose, such as top-level site navigation versus in-page content navigation.
For a detailed breakdown of specific browser nuances and older version support, refer to the first link in the Useful Resources below.