The <nav> element wraps a block of major navigation links — not every group of links on a page needs one.
Syntax & Example
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/cources">Courses</a></li>
<li><a href="/notes">Notes</a></li>
</ul>
</nav>Multiple nav Elements Need Labels
<nav aria-label="Main navigation">...</nav>
<footer>
<nav aria-label="Footer navigation">
<a href="/privacy-policy">Privacy Policy</a>
<a href="/terms-and-conditions">Terms</a>
</nav>
</footer>If a page has more than one <nav>, an aria-label lets screen reader users tell them apart when jumping between navigation landmarks — otherwise they just hear "navigation" twice with no way to distinguish them. See aria-label.
When NOT to Use nav
Not every list of links is a <nav>. A handful of tags at the bottom of a blog post, or a single "read more" link, don't need one — reserve it for genuinely significant navigation blocks (primary menu, table of contents, pagination, footer links).
Practical Use Case
Primary site navigation, breadcrumbs, pagination controls, and a table of contents are all legitimate uses of <nav>.
Common Mistakes
- Wrapping every single link or link group in
<nav>— overuse dilutes its value as a landmark - Multiple
<nav>elements with no distinguishingaria-label, making them indistinguishable to screen reader users
Interview Relevance
"Should every group of links be wrapped in nav?" — a good question to test whether a candidate understands semantic HTML as meaningful markup, not decoration to sprinkle everywhere.
Practice Question
Build a page footer with two distinct link groups (legal links, social links) using <nav> correctly with distinguishing labels.
