HTML Tutorial

HTML navbar

HTML <nav> Tag

The <nav> tag is used to define a section of navigation links. It is a semantic HTML5 element that helps search engines and screen readers identify navigation menus on a web page.

Why Use <nav>?

Using <nav> makes your website more structured, accessible, and SEO-friendly. It should contain only major navigation links (not all links on the page).

Syntax

<nav>
  <a href="home.html">Home</a>
  <a href="about.html">About</a>
  <a href="services.html">Services</a>
  <a href="contact.html">Contact</a>
</nav>

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Navigation Example</title>
  </head>
  <body>

    <nav>
      <a href="index.html">Home</a> |
      <a href="blog.html">Blog</a> |
      <a href="projects.html">Projects</a> |
      <a href="contact.html">Contact</a>
    </nav>

    <h1>Welcome to My Website</h1>

  </body>
</html>

Best Practices

Use <nav> for major site navigation only
Do not include footer links or in-page anchor links inside <nav>
Combine with CSS for styling horizontal or vertical menus

Conclusion

The <nav> tag defines a navigation section in HTML. It's a key element for building organized and accessible websites.

🌟 Enjoyed Learning with Us?

Help others discover Technorank Learning by sharing your honest experience.
Your support inspires us to keep building!

Leave a Google Review

Topics