0
0
HTMLmarkup~5 mins

Navigation structure basics in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Navigation helps people move around a website easily. It shows links to important pages so visitors don't get lost.

When you want to create a menu for your website.
When you need to help users find different sections quickly.
When building a header with links to main pages.
When organizing links in a sidebar or footer.
When improving website accessibility for keyboard users.
Syntax
HTML
<nav>
  <ul>
    <li><a href="page1.html">Page 1</a></li>
    <li><a href="page2.html">Page 2</a></li>
    <li><a href="page3.html">Page 3</a></li>
  </ul>
</nav>

The <nav> tag defines a navigation section.

Use <ul> and <li> to list links clearly.

Examples
A simple navigation menu with links to sections on the same page.
HTML
<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>
Navigation with an ARIA label to help screen readers understand its purpose.
HTML
<nav aria-label="Main navigation">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>
Navigation using inline links separated by vertical bars for a simple horizontal menu.
HTML
<nav>
  <a href="index.html">Home</a> |
  <a href="blog.html">Blog</a> |
  <a href="about.html">About</a>
</nav>
Sample Program

This example shows a navigation bar at the top with three links. The links use clear text and good color contrast. The navigation uses semantic tags and an ARIA label for accessibility. The menu is horizontal and spaced nicely using CSS Flexbox.

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 Example</title>
  <style>
    nav {
      background-color: #004080;
      padding: 1rem;
    }
    nav ul {
      list-style: none;
      display: flex;
      gap: 1.5rem;
      margin: 0;
      padding: 0;
    }
    nav a {
      color: white;
      text-decoration: none;
      font-weight: bold;
    }
    nav a:hover,
    nav a:focus {
      text-decoration: underline;
      outline: none;
    }
  </style>
</head>
<body>
  <header>
    <nav aria-label="Primary navigation">
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section id="home">
      <h1>Welcome to Our Website</h1>
      <p>This is the home section.</p>
    </section>
    <section id="services">
      <h2>Our Services</h2>
      <p>Details about services offered.</p>
    </section>
    <section id="contact">
      <h2>Contact Us</h2>
      <p>How to get in touch.</p>
    </section>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Always use the <nav> element for main navigation to help screen readers.

Use clear link text that tells users where the link goes.

Make sure navigation works well on small screens by using flexible layouts like Flexbox.

Summary

Navigation helps users find pages easily.

Use <nav> with lists of links for clear structure.

Make navigation accessible and responsive for all users.