nav Element in HTML
Internal and External Navigation with ARIA Roles

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.