HTML <nav> Element: Guiding the User’s Journey
Navigation is more than menus — it’s the map to your content. In HTML, the <nav> element tells browsers, search engines, and assistive devices: “Here is where the journey begins.” Whether it’s a site-wide menu or a local section, <nav> structures it semantically and accessibly.
What Is the <nav> Element?
The <nav> element defines a block of navigation links. This can include internal anchor links, external URLs, or in-page sections — anything that helps users move around your site or page.
Basic Structure
<nav>
<ul>
<li><a href="#apple">Apple</a></li>
<li><a href="#banana">Banana</a></li>
<li><a href="#cherry">Cherry</a></li>
</ul>
</nav>
• Apple
• Banana
• Cherry
This example offers a simple in-page navigation menu — great for single-page layouts, documentation, or FAQs.
Internal vs External Links
Internal Link (same page):
<a href="#banana">Go to Banana Section</a>
Internal Link (another page):
<a href="/fruits/banana.html">Banana Info</a>
External Link:
<a href="https://example.com/banana" target="_blank" rel="noopener">Learn about bananas</a>
All these links can live within a <nav> block if their goal is to guide navigation.
Example: Site Navigation
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About Us</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
• Home
• About Us
• Contact
This structure clearly separates navigational content and helps users (and bots) quickly identify it.
Accessibility Tip: Add ARIA Role
While <nav> is already semantic, screen readers benefit even more when used with aria-label for multiple navs.
<nav aria-label="Main Site Navigation">...</nav>
<nav aria-label="Social Media Links">...</nav>
This distinction is helpful when pages include more than one navigation block (e.g., main nav + footer links).
Example: Navigation with Icons and External Links
<nav aria-label="Fruit Navigation">
<ul>
<li><a href="#apple">🍎 Apple</a></li>
<li><a href="#banana">🍌 Banana</a></li>
<li><a href="https://fruitinfo.com/cherry" target="_blank">🍒 Cherry (external)</a></li>
</ul>
</nav>
• 🍎 Apple
• 🍌 Banana
• 🍒 Cherry (external)
When NOT to Use <nav>
Not all links belong in a <nav>. Avoid wrapping inline links (like “read more” in an article) inside <nav>. Use <nav> for groups of links that define structure and flow.
Summary
The <nav> element is a semantic powerhouse for structuring navigational content. You’ve learned how to:
- Use
<nav>to group internal and external links - Implement accessible labels with
aria-label - Structure clear menus for pages, sections, or even footers
What’s Next?
Coming up next: we’ll explore the <main> element — the heart of your content, where everything truly begins.
