<nav>

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.