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