Syntax
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>Examples
Primary Navigation
A site's main navigation menu.
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/docs">Docs</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>Breadcrumb Navigation
Using nav for breadcrumb trails, with an aria-label to distinguish it from the main menu.
<nav aria-label="Breadcrumb">
<ol style="display: flex; gap: 8px; list-style: none; padding: 0;">
<li><a href="/">Home</a></li>
<li>/</li>
<li><a href="/docs">Docs</a></li>
<li>/</li>
<li>HTML</li>
</ol>
</nav>Styled Horizontal Nav
A horizontally laid out navigation bar.
<nav style="display: flex; gap: 24px; padding: 12px 0; border-bottom: 1px solid #e5e7eb;">
<a href="#" style="text-decoration: none; color: #374151; font-weight: 500;">Home</a>
<a href="#" style="text-decoration: none; color: #374151; font-weight: 500;">Docs</a>
<a href="#" style="text-decoration: none; color: #374151; font-weight: 500;">Blog</a>
</nav>Best practices
- Reserve <nav> for major navigation blocks, not every list of links on a page
- Use aria-label to distinguish multiple <nav> elements on the same page, like "Main" vs. "Breadcrumb"
- Wrap navigation links in a list (<ul>/<li>) for proper semantic structure
- Avoid nesting a <nav> inside another <nav>
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
<header>
The <header> element represents introductory content for its nearest ancestor sectioning element, typically containing a logo, site title, navigation, or search form. A page can have multiple <header> elements — one for the page itself, and others for individual <article> or <section> elements. It has no default visual styling of its own.<footer>
The <footer> element represents closing content for its nearest ancestor sectioning element, typically containing copyright notices, contact information, related links, or author details. Like <header>, a page can have multiple footers — one for the whole page and others scoped to individual articles or sections.<section>
The <section> element groups related content that typically has its own heading, representing a distinct thematic section of a document — like a chapter, tab panel, or a chunk of a landing page. Unlike <div>, which carries no semantic meaning, <section> tells browsers and assistive technology that its content forms a standalone, related group. If content does not have a natural heading or is not thematically distinct, a plain <div> is usually the better choice.<article>
The <article> element represents a self-contained piece of content that could theoretically be distributed or reused independently — like a blog post, news story, forum post, or product card. The key test is whether the content would still make sense if syndicated on its own, separate from the rest of the page. Articles can be nested (e.g., a blog post article containing comment articles).
The <header> element represents introductory content for its nearest ancestor sectioning element, typically containing a logo, site title, navigation, or search form. A page can have multiple <header> elements — one for the page itself, and others for individual <article> or <section> elements. It has no default visual styling of its own.<footer>
The <footer> element represents closing content for its nearest ancestor sectioning element, typically containing copyright notices, contact information, related links, or author details. Like <header>, a page can have multiple footers — one for the whole page and others scoped to individual articles or sections.<section>
The <section> element groups related content that typically has its own heading, representing a distinct thematic section of a document — like a chapter, tab panel, or a chunk of a landing page. Unlike <div>, which carries no semantic meaning, <section> tells browsers and assistive technology that its content forms a standalone, related group. If content does not have a natural heading or is not thematically distinct, a plain <div> is usually the better choice.<article>
The <article> element represents a self-contained piece of content that could theoretically be distributed or reused independently — like a blog post, news story, forum post, or product card. The key test is whether the content would still make sense if syndicated on its own, separate from the rest of the page. Articles can be nested (e.g., a blog post article containing comment articles).