<nav>
By selbekk for Semantic Advent |
Want to help your users figure out where your navigation blocks are? Say hello to <nav>
!
The
<nav>
HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.
MDN Docs
Some of the semantic elements provided by the HTML5 standard seemed a bit… esoteric, but the <nav>
element just made sense to me from the get-go. A page might have a bunch of links in it, but finding some way to mark some of these links as navigational elements, seemed like a nice feature for a semantic language to have.
The most commonplace use case for these blocks is to wrap your main site navigation. It might look something like this:
<nav>
<ul>
<li>
<a href="/products">Products</a>
</li>
<li>
<a href="/pricing">Pricing</a>
</li>
<li>
<a href="/about">About</a>
</li>
</ul>
</nav>
Here, we wrap a list of links in a<nav>
block. This gives us a few quick wins:
- Screen readers can scan our HTML, and find all our navigational components. In MacOS' VoiceOver,
<nav>
blocks show up as navigation landmarks when you use the rotor tool (VO + U) - Search engines like Google might use your
<nav>
blocks to show relevant "sub" links if you're the top hit for a given search term - More generally, you make it possible for crawlers to parse your page and put in
Labelling
If you want to label your navigation blocks (like "main navigation", "on this page" etc), you have two choices:
- If you have a heading or a text label for your navigation (typical for "on this page" type navigations), you can use
aria-labelledby
to refer to the relevant heading. - If you don't, you can label it with an
aria-label
. Just remember to skip the word "navigation", as that will be added automatically.
Not only lists
Even though the typical example of the <nav>
element contains an unordered list of links (like our example above), they don't have to. If you have a prose section that includes your navigational links, you can wrap that part in some links:
<nav aria-labelledby="get-in-touch">
<h2 id="get-in-touch">Get in touch</h2>
<p>
I would love to get in touch with you. You can reach out to me on
<a href="https://x.com/selbekk">X</a>, or you can send me an
email at <a href="mailto:selbeezy@gmail.com">selbeezy@gmail.com</a>.
If you're a developer, feel free to check out my <a href="https://www.github.com/selbekk">GitHub</a>.
</p>
</nav>
Not all links
When you get started with the <nav>
element, you might think every collection of links needs to be wrapped in a <nav>
. That's not really necessary. Footer links are a great example – they might not be a great use case for this kind of semantic mention. Instead, just list them out like you typically would.
With all this in the bag, I hope you start using <nav>
elements a bit more. It's an excellent quick win, and your users will thank you for it – screen reading or not.