Learn HTML – Part 25 – nav Tag – Navigation Links Section

The HTML nav tag is used to define a section of navigation links in a webpage.

Navigation links help users move between different pages or sections of a website.

What is the nav Tag?

The nav tag is a semantic HTML element introduced in HTML5.

It represents a section of a page that contains major navigation links.

Common Examples of Navigation Links

• Main website menu
• Top navigation bar
• Sidebar navigation
• Footer navigation links

Basic Syntax

<nav>
   <a href="#">Home</a>
   <a href="#">About</a>
   <a href="#">Services</a>
   <a href="#">Contact</a>
</nav>

Example – Simple Navigation Menu

<nav>
   <a href="#">Home</a>
   <a href="#">Blog</a>
   <a href="#">Tutorials</a>
   <a href="#">Contact</a>
</nav>

Output:

Using nav with Lists

Navigation menus are often structured using lists for better organization.

<nav>
   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
   </ul>
</nav>

Why Use the nav Tag?

• Improves semantic structure
• Helps search engines understand navigation sections
• Improves accessibility for screen readers
• Organizes navigation links clearly

The nav tag should contain the primary navigation links of a webpage.

Common Mistakes Beginners Make

• Using the nav tag for every group of links
• Adding unrelated content inside the navigation section
• Not organizing links properly

Conclusion

The HTML nav tag is used to define navigation links on a webpage.

It helps organize menus and improves the semantic structure of a website.

What’s Next?

Now that you understand the nav tag, the next step is learning about the main tag, which is used to define the main content of a webpage.

Next: Learn HTML – Part 26 – main Tag – Main Content Section →

Series: Learn HTML Series