structure
<nav>
Marks a section of major navigation links, either within the site or the current page. Use for primary menus, breadcrumbs, and pagination — not for every group of links.
<nav aria-label="Main"><ul>...</ul></nav>Common attributes
| Attribute | Purpose |
|---|---|
| aria-label | Names the nav when multiple exist |
| aria-labelledby | References a heading that names the nav |
| class | Styling hook |
| id | Anchor target or JS hook |
Examples
<nav aria-label="Primary"><a href="/">Home</a><a href="/blog">Blog</a></nav>Site-wide primary navigation
<nav aria-label="Breadcrumb"><ol><li><a href="/">Home</a></li><li>Docs</li></ol></nav>Breadcrumb trail
<nav aria-label="Table of contents">...</nav>In-page section navigation
Gotcha
Not every collection of links is a
Related tags
<header>
Represents introductory content or a group of navigational aids for its nearest sectioning ancestor. Use it at the top of the page, or inside an <article> or <section> for that block's heading area.
<a>
The anchor element creates a hyperlink to another page, a file, an in-page anchor, an email, or a phone number. It is the fundamental building block of the web's link graph and a key SEO signal.
<footer>
Represents a footer for its nearest sectioning ancestor — typically author info, copyright, or related links. Use it at the bottom of the page, or inside an <article>/<section> for a block-level footer.
<div>
Generic block-level container with no inherent semantic meaning, used to group content for styling or scripting. Reach for it only when no semantic element (section, article, nav, header) fits the content.
<span>
Generic inline container with no semantic meaning, used to style or script a run of text or inline content. Use it when semantic inline elements like <em>, <strong>, or <code> don't fit.