The nav
tag is a semantic HTML5 element used to define a block of navigation links. It tells browsers, screen readers, and search engines:
“This section contains links to other parts of the site or page.”
Whether you’re building a website menu, sidebar, or table of contents, the <nav>
tag is essential for clear, accessible, and SEO-friendly structure.
📌 What Is the <nav>
Tag?
The <nav>
element wraps primary navigational sections, such as:
- Main site menus
- Internal page jump links
- Table of contents
- Sidebar navigation
🧠 It does not have any default styling — you must use CSS.
🧪 Basic Example
htmlCopyEdit<nav>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
This defines a main navigation menu.
🧩 Visual Structure
<nav>
└── <ul>
├── <li><a>Link 1</a></li>
├── <li><a>Link 2</a></li>
└── ...
✅ It’s best practice to place <nav>
elements inside <header>
, <aside>
, or the <body>
.
🎨 Styling the Navigation
nav ul {
display: flex;
gap: 20px;
list-style: none;
padding: 0;
}
nav a {
text-decoration: none;
color: #333;
font-weight: bold;
}
nav a:hover {
color: #007BFF;
}
Result: A clean horizontal navigation bar.
🎯 When to Use <nav>
Situation | Use <nav> ? |
---|---|
✅ Main site menu | Yes |
✅ Table of contents | Yes |
❌ Footer copyright links | No |
❌ In-page “Back to top” links | No |
Use <nav>
for major navigation blocks, not every group of links.
🌍 Multiple <nav>
Tags?
Yes, you can have multiple <nav>
elements on a page — for example:
<header>
<nav> <!-- Main site navigation --> </nav>
</header>
<aside>
<nav> <!-- Sidebar navigation --> </nav>
</aside>
Use aria-label
or headings to describe their purpose:
htmlCopyEdit<nav aria-label="Main navigation">
<nav aria-label="Sidebar links">
🧑🦯 Accessibility Tip
- Use
<nav>
witharia-label
or<h2>
headings for screen reader context. - Place navigation logically in the DOM (e.g., top or side).
- Use keyboard-friendly markup (no
onclick
without fallback).
📈 SEO Benefits
- Semantic HTML improves crawling and indexing.
- Clear structure helps search engines understand your site’s layout.
- Helps tools like Google Lighthouse score your site better for accessibility and best practices.
✅ Conclusion
The <nav>
tag is a core part of modern HTML5 layout. It gives structure and meaning to your navigation links, enhances accessibility, and improves SEO. Whether it’s a main menu, sidebar, or table of contents — wrap it in <nav>
and you’re building smarter, cleaner HTML.