📄 Creating Navigation Menus with HTML - Making Site Easy to Explore

📅 October 10, 2025

✍️ By Evans

Hey! 👋

When I started creating multiple pages on my site, I quickly realized I needed an easy way for visitors (and me 😅) to move between them. That’s when I learned about HTML navigation menus — the <nav> tag and links working together to make your site flow smoothly.

Let me show you what I learned! 🚀

🧱 The <nav> Tag – The Navigation Area

The <nav> tag tells browsers, search engines, and screen readers that this section contains main navigation links.

Here’s a simple example:

<nav>
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
  <a href="blog.html">Blog</a>
  <a href="contact.html">Contact</a>
</nav>
                        

That’s the basic idea — just a set of links inside the <nav> tag!

🎨 Adding Some Style

When I first added links like that, they stacked on top of each other.

To make them look like a menu bar, I used a bit of CSS.

<nav style="background-color: #333; padding: 10px;">
  <a href="index.html" style="color: white; margin: 10px; text-decoration: none;">Home</a>
  <a href="about.html" style="color: white; margin: 10px; text-decoration: none;">About</a>
  <a href="blog.html" style="color: white; margin: 10px; text-decoration: none;">Blog</a>
  <a href="contact.html" style="color: white; margin: 10px; text-decoration: none;">Contact</a>
</nav>
                        

Now it looks like a real menu — simple, clean, and functional! 😎

🧱 Making It Look Even Better

You can use lists (<ul> and <li>) inside the nav to structure your menu better. That’s what most professional sites do.

Example:

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="blog.html">Blog</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>
                        

With CSS, you can turn that into a horizontal navbar:

nav ul {
  list-style-type: none;
  background-color: #333;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

nav li {
  display: inline;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 14px 16px;
  display: inline-block;
}

nav a:hover {
  background-color: #555;
}
                            

Result: a smooth, professional-looking navigation bar that reacts when you hover over it ✨

💡 Things I Learned

• Use
• Always make your navigation clear and simple.
• Test your links! A broken link can ruin the whole experience. 😅

🎯 What I Learned

Building navigation menus taught me how structure and style come together in HTML and CSS. It’s satisfying to see a menu bar appear and actually work!

👉 What’s Next?

Next up, I’ll share HTML Best Practices I’m Following as a Beginner — all the small habits I’ve picked up that make my code cleaner and easier to manage. 💡

Catch you in the next one!

— Evans 💻