How to create navigation bar in html

HtmlHow-ToBeginner · 4 min read

How to Create a Navigation Bar in HTML: Simple Guide

To create a navigation bar in HTML, use the <nav> element to wrap a list of links inside <ul> and <li> tags. Style it with CSS for layout and appearance to make it horizontal or vertical.

📐

Syntax

A navigation bar is created using the <nav> element which semantically defines navigation links. Inside it, use an unordered list <ul> to group the links, and each link is placed inside a list item <li> with an anchor <a> tag.

<nav>: container for navigation links
<ul>: groups list items
<li>: each item in the list
<a>: clickable link

html

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

💻

Example

This example shows a simple horizontal navigation bar with four links. CSS is used to remove bullet points, display links side by side, and add spacing and background color.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Navigation Bar</title>
  <style>
    nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      background-color: #333;
      display: flex;
    }
    nav li {
      margin: 0;
    }
    nav a {
      display: block;
      padding: 1rem 1.5rem;
      color: white;
      text-decoration: none;
      font-weight: bold;
    }
    nav a:hover {
      background-color: #555;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

Output

A horizontal dark navigation bar with four white links: Home, About, Services, Contact. Links highlight with a lighter background on hover.

⚠️

Common Pitfalls

Common mistakes when creating navigation bars include:

Not using the <nav> element, which reduces semantic meaning and accessibility.
Forgetting to remove default list styles, causing bullet points to appear.
Not styling links to display horizontally, so the nav looks like a vertical list.
Using inline styles or deprecated tags instead of CSS for layout and colors.

Always use semantic HTML and CSS for styling.

html

<!-- Wrong: No nav element and list bullets visible -->
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#about">About</a></li>
</ul>

<!-- Right: Using nav and CSS to remove bullets and display horizontally -->
<nav>
  <ul style="list-style:none; display:flex; padding:0; margin:0;">
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>

📊

Quick Reference

Tips for creating navigation bars:

Use <nav> for semantic navigation.
Group links inside <ul> and <li>.
Use CSS Flexbox to arrange links horizontally.
Remove default list styles with list-style: none;.
Style links with padding and colors for better usability.

✅

Key Takeaways

Use the

Group links inside an unordered list

for structure.

Use CSS Flexbox to display navigation links horizontally and remove bullet points.

Style links with padding and colors to improve user experience and accessibility.

Avoid inline styles and deprecated tags; always separate content and style.