Tag nav

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>

SituationUse <nav>?
✅ Main site menuYes
✅ Table of contentsYes
❌ Footer copyright linksNo
❌ In-page “Back to top” linksNo

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> with aria-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.