How do I mark up a navigation area without labeling every group as navigation?
Quick answer
Use <nav> for a major block of links that helps people navigate, such as a site menu or table of contents—not for every collection of links. A page can have more than one <nav> when the areas serve distinct navigation purposes. When appropriate, identify each with aria-labelledby and a heading that describes its purpose, so the areas are easier to distinguish. [S1]
The question, the details, the next step.
I have several groups of links on one page. Should I wrap each group in <nav> so it’s clear that they’re links?
No. Use <nav> for a major block of navigation links, not automatically for every group of links. A site menu, a table of contents, or an index are examples of navigation areas; a small cluster of incidental links does not need a navigation landmark just because it contains links. [S1]
A useful first question is: does this block help people move around the site or find their way through this page? If yes, it may be a good candidate for <nav>. If it is simply a few links within ordinary page content, keep it in that content rather than marking it as a separate navigation area.
My page has a site menu at the top and a table of contents beside a long article. Can both be navigation areas?
Yes. Those serve different navigation purposes: one helps people move around the site, and the other helps them move within the article. A page may have multiple <nav> elements, including for site navigation and in-page navigation. [S1]
Give each area a heading that describes its purpose, then connect the corresponding <nav> to that heading with aria-labelledby. For example:
<nav aria-labelledby="site-menu-heading">
<h2 id="site-menu-heading">Site menu</h2>
<!-- site navigation links -->
</nav>
<nav aria-labelledby="contents-heading">
<h2 id="contents-heading">On this page</h2>
<!-- links to article sections -->
</nav>The headings distinguish the two areas without making every link group a navigation landmark.
How do I decide whether two <nav> areas need different labels? Is “Navigation” enough for both?
When a page has multiple navigation areas, choose labels that make their different purposes clear. “Site menu” and “On this page” are more informative than repeating a generic “Navigation” heading. MDN recommends using aria-labelledby to label multiple <nav> elements when appropriate. [S1]
In the example, each <nav> refers to the id of its own heading. The label should describe the area’s job, not list all its links.
Can you give me a quick way to review my page before I finish?
Review the page by considering each link group separately. Ask whether it is a major navigation block, whether its purpose is distinct from any other navigation area, and whether its label helps distinguish it. If a group is not a major navigation block, it does not need <nav> just to indicate that it contains links. [S1]
For the example, the site menu and article contents are distinct navigation blocks. Their headings describe their purposes, and each <nav> references its own heading. Use this as a markup-planning example, then review the choices in the context of your page.
A practical checklist
Identify link groups that serve a major navigation purpose; do not mark every group as
<nav>.For each candidate, describe what it helps a reader navigate.
Use separate
<nav>elements for distinct navigation areas.When appropriate, add a heading and reference it with that area’s
aria-labelledby.Review multiple areas’ labels together to make sure their purposes can be told apart.
A few more useful answers
Does every set of links need a `<nav>` element?
No. Use <nav> for a major block of navigation links, not every link or link group. [S1]
Can a page have a site menu and an in-page contents area in separate `<nav>` elements?
Yes. MDN gives site navigation and in-page navigation as examples of multiple <nav> elements on a page. Label them with aria-labelledby when appropriate. [S1]
What should I call two different navigation areas?
Choose labels that describe their different purposes, such as “Site menu” and “On this page,” rather than repeating a generic label.
Sources
References used for this guide.
- [S1] The HTML nav navigation section element — MDN developer.mozilla.org · Checked