👀 Live Preview
A horizontal main navigation menu:
HTML <nav> Tag
Overview
What You’ll Learn
The <nav> tag plays a pivotal role in creating navigational menus and links. This guide empowers you to build intuitive, semantic, and accessible navigation on your website.
Core Syntax
Wrap navigation links inside <nav> opening and closing tags.
Semantic Landmark
Identify major navigation blocks for SEO and screen readers.
ul + li + a
Structure menus with lists and anchor links.
Main Navigation
Build top-level site menus that users expect.
Footer Navigation
Organize legal and secondary links in the footer.
Accessible Labels
Use aria-label when multiple nav regions exist.
Fundamentals
What Is the <nav> Tag?
The <nav> element is a semantic HTML5 tag designed explicitly for defining navigation blocks on a web page. It encapsulates links, menus, and navigation-related content, helping structure the layout in a meaningful way.
Navigation landmark
Browsers and assistive technologies expose <nav> as a navigation landmark. Users can jump directly to nav regions with keyboard shortcuts, and search engines better understand your site structure.
Use nav for major navigation sections — not every group of links on a page. A sidebar of related article links or inline text links typically do not need a nav wrapper.
Foundation
📝 Syntax
Enclose your navigation content between opening and closing <nav> tags:
syntax.html
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/services">Services</a></li>
</ul>
</nav>Syntax Rules
<nav>requires both opening and closing tags.- Place major navigation links inside — typically a
<ul>of<li>items with<a>anchors. - Add
aria-labelwhen the page has more than onenavelement. - Do not nest
navinside anothernavunnecessarily.
Cheat Sheet
⚡ Quick Reference
| Pattern | Code Snippet | Notes |
|---|---|---|
| Basic nav | <nav><ul><li><a>...</a></li></ul></nav> | Standard menu |
| Named landmark | aria-label="Main" | Multiple nav regions |
| Styled nav | class="main-navigation" | CSS hook |
| Footer nav | <footer><nav>...</nav></footer> | Secondary links |
| vs div | <nav> semantic | Prefer over plain div |
| Attributes | Global only | class, id, aria-label |
Reference
🧰 Attributes
The <nav> element has no unique attributes — global attributes and ARIA attributes apply:
class GlobalApply CSS classes for layout, colors, and responsive menu styles.
class="main-navigation"id GlobalUnique identifier for skip links or JavaScript menu toggles.
id="site-nav"aria-label A11yNames the navigation region when multiple nav elements exist on one page.
aria-label="Main navigation"style InlineInline styles work but external CSS is preferred for maintainability.
background: #1e293b attributes.html
<nav
class="main-navigation"
aria-label="Primary menu"
>
<!-- Your styled navigation content here -->
</nav>Hands-On
Examples Gallery
Styled navigation, main site menus, and footer link groups with copy-ready markup.
Styled Navigation Bar
Apply class and CSS to customize the appearance of your navigation block.
styled-nav.html
<nav class="main-navigation" aria-label="Primary menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>📚 Common Use Cases
Use <nav> to structure the main navigation menu of a website (typically at the top or side) and to organize footer navigation links such as privacy policy and terms of service.
Main Navigation
The primary site menu with Home, Products, and Contact links.
main-navigation.html
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>Footer Navigation
Organize secondary links inside a <footer> with a nested <nav>.
footer-navigation.html
<footer>
<nav aria-label="Footer links">
<ul>
<li><a href="/privacy">Privacy Policy</a></li>
<li><a href="/terms">Terms of Service</a></li>
</ul>
</nav>
</footer>Design
Styling <nav> with CSS
Style navigation bars with flexbox, colors, and responsive breakpoints:
display: flex Horizontal menu:hover Link feedback:focus-visible Keyboard focus@media Mobile layout nav-styles.css
.main-navigation {
background: #1e293b;
padding: 0.75rem 1.25rem;
}
.main-navigation ul {
display: flex;
gap: 1rem;
list-style: none;
margin: 0;
padding: 0;
}
.main-navigation a {
color: #f8fafc;
text-decoration: none;
font-weight: 600;
}
.main-navigation a:hover {
color: #93c5fd;
}Styled navigation preview
A11y
♿ Accessibility
Navigation must work for keyboard and screen reader users:
- Use nav for major sections — helps assistive technology expose navigation landmarks.
- aria-label on multiple navs — distinguish main menu from footer links.
- Keyboard accessible links — all items must be reachable and activatable with Tab and Enter.
- Visible focus styles — use
:focus-visibleoutlines on menu links. - Skip links — provide
<a href="#main">Skip to content</a>before the nav for keyboard users.
🧠 How <nav> Works
1
Author wraps navigation links
Place the site menu inside <nav> with a <ul> list of anchor links.
Markup
2
Browser exposes a landmark
Assistive technology registers nav as a navigation region users can jump to.
Semantics
3
CSS styles the menu
Flexbox, colors, and media queries shape horizontal or mobile-friendly layouts.
Styling
=
Clear, navigable site structure
Users and search engines understand where major navigation lives on every page.
Compatibility
Browser Support
The <nav> element is an HTML5 semantic tag with full support in all modern browsers and Internet Explorer 9+.
Baseline · HTML5
Semantic navigation everywhere
From IE9 to the latest mobile browsers — nav renders as a block-level container in every environment.
100% Core tag support
Google Chrome All versions · Desktop & Mobile
Full supportMozilla Firefox All versions · Desktop & Mobile
Full supportApple Safari All versions · macOS & iOS
Full supportMicrosoft Edge All versions · Chromium & Legacy
Full supportInternet Explorer IE 9+ · Landmark support
Full supportOpera All modern versions
Full support<nav> tag 100% supported
Bottom line: Use <nav> confidently for semantic navigation landmarks in every production environment today.
Wrap Up
Conclusion
Mastering the <nav> tag is essential for crafting effective and user-friendly navigation on your website. By incorporating this semantic element, you enhance both the structure of your HTML and the overall user experience.
Combine nav with ul, li, and a for well-structured menus, add aria-label when needed, and apply responsive CSS so navigation works on every device.
Pro Tips
💡 Best Practices
✅ Do
- Use
navfor major navigation blocks - Combine with
ulandlifor structure - Add
aria-labelfor multiple nav regions - Apply responsive design for mobile menus
❌ Don’t
- Wrap every link group in
nav - Use
divwhennavis appropriate - Forget keyboard focus styles on menu links
- Nest nav elements without clear purpose
Summary
Key Takeaways
Knowledge Unlocked
Six truths every developer should know about <nav>
Bookmark these before you build site navigation.
6
Core concepts 01
Navigation Landmark
<nav> marks major link sections.
02
ul + li + a
Standard accessible menu structure.
Pattern 03
Main Menu
Top or side primary navigation.
Use case 04
Footer Links
Secondary nav inside footer.
Use case 05
aria-label
Name multiple nav regions.
A11y 06
Universal Support
HTML5 — IE9+ and all modern browsers.
Compatibility❓ Frequently Asked Questions
It defines a section of major navigation links on a page, such as a site menu or footer link group.
No. Only use
nav for major navigation sections, not minor inline or sidebar link lists.nav is semantic navigation. div has no meaning. Prefer nav for menus.Yes, when multiple
nav elements exist on one page to distinguish main menu from footer links.Yes. Full support in all modern browsers and Internet Explorer 9 and later.
Build Semantic Navigation
Practice main and footer menus in the Try It editor.
About the author
6 people found this page helpful