Creating Navigation Menus in HTML

How to Create Navigation Menus in HTML

A navigation menu helps users move around your website. It's typically built using the <nav>, <ul>, <li>, and <a> tags.

1. Basic Horizontal Navigation Menu

<nav>
  <ul style="list-style: none; display: flex; gap: 15px;">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

2. Vertical Navigation Menu

<nav>
  <ul style="list-style: none; padding: 0;">
    <li><a href="home.html">Home</a></li>
    <li><a href="blog.html">Blog</a></li>
    <li><a href="portfolio.html">Portfolio</a></li>
  </ul>
</nav>

3. Styled Navigation Menu with Background

<nav style="background-color: #333; padding: 10px;">
  <ul style="list-style: none; display: flex; gap: 20px; margin: 0; padding: 0;">
    <li><a href="home.html" style="color: white; text-decoration: none;">Home</a></li>
    <li><a href="about.html" style="color: white; text-decoration: none;">About</a></li>
    <li><a href="contact.html" style="color: white; text-decoration: none;">Contact</a></li>
  </ul>
</nav>

4. Using <nav> for Semantic HTML

Always wrap your menu in the <nav> tag for better accessibility and SEO.

<nav>
  <a href="index.html">Home</a> |
  <a href="about.html">About</a> |
  <a href="services.html">Services</a>
</nav>

Best Practices

Use the <nav> tag to define navigation sections
Use lists (<ul> and <li>) for structured menus
Style links for hover/focus states with CSS
Use semantic tags for SEO and screen readers
Keep navigation consistent across all pages
Make sure navigation is keyboard accessible
Use descriptive link text (avoid "click here")
Consider mobile responsiveness in your design
Highlight the current page in the navigation