Use `<nav>` for primary navigation. Mark the currently-active link with `aria-current="page"` — screen readers will announce it, and you get a free CSS hook with `[aria-current]`.
HTML
<nav aria-label="Primary">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/pricing" aria-current="page">Pricing</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/docs">Docs</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
<!-- Style the active link in CSS — no extra "active" class needed -->
<style>
nav a[aria-current="page"] {
color: var(--accent);
font-weight: 700;
text-decoration: none;
}
</style>
<!-- aria-current values: page | step | location | date | time | true -->
<!-- aria-label or aria-labelledby on <nav> is important when you have multiple <nav>s
(e.g. primary + footer); screen readers use them to disambiguate. -->Save your own code snippets
Create a free account and build your private vault. Share publicly whenever you want.