Using Lists for Navigation and Grouping

You have already seen that <nav> marks a navigation landmark. Now that you know lists, you can use the full, correct pattern that real websites use: <nav> + <ul> + <li> + <a>.

Why lists are used in navigation

Navigation menus are, by definition, a collection of links where the order matters somewhat but no item is inherently more important than the others. A <ul> communicates exactly that: a group of items.

Using a list inside <nav> also improves accessibility. Screen readers announce the number of items in a list, giving users an immediate sense of how large the navigation is before they navigate through it.

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

Each link is an <li> item. The <ul> groups them. The <nav> identifies the whole block as a navigation landmark.

The structure: nav → ul → li → a

The nesting order is always:

1. <nav> — landmark
2. <ul> — list of items
3. <li> — each item
4. <a> — the link inside each item

<header>
  <h1>Mountain Hiking</h1>
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="trails.html">Trails</a></li>
      <li><a href="gear.html">Gear</a></li>
    </ul>
  </nav>
</header>

The CSS will remove the default bullets from this list later — visually it will look like a clean row or column of links. The list structure is about meaning, not appearance.

Lists for grouped content

Beyond navigation, lists are a natural fit anywhere you have grouped, related items in the body of the page — features, requirements, related resources, links in a sidebar, or links in a footer.

Sidebar with related links:

<aside>
  <h3>Related Topics</h3>
  <ul>
    <li><a href="gear.html">Essential Gear</a></li>
    <li><a href="safety.html">Trail Safety</a></li>
    <li><a href="maps.html">Reading Trail Maps</a></li>
  </ul>
</aside>

Footer link group:

<footer>
  <p>© 2025 Mountain Hiking</p>
  <ul>
    <li><a href="privacy.html">Privacy Policy</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</footer>

FAQ grouping using a list:

<section>
  <h2>Common Questions</h2>
  <ul>
    <li>What should I bring on a day hike?</li>
    <li>How do I read a trail difficulty rating?</li>
    <li>What is Leave No Trace?</li>
  </ul>
</section>

Lists are structural, not visual

The bullets, numbers, and indentation you see in the browser are just defaults. Every <ul> and <ol> can be styled with CSS to look like a horizontal nav bar, a card grid, a simple row of links, or anything else. The element you choose should reflect the meaning of the content, not how you want it to look.

Exercise

Open index.html in VS Code.

In Module 03, you added a <nav> inside <header> with plain <a> links. Now you are going to upgrade it to use a <ul>.

Before (what you have now):

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

After (what you will have):

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

Steps:

1. Find your <nav> element inside <header>.
2. Wrap all the <a> tags in a <ul>.
3. Wrap each individual <a> in its own <li>.
4. Save and open index.html in your browser. The navigation will now appear as a bulleted list — that is expected. CSS will remove the bullets later when you style the site.

Module 04 Recap

• <ul> — unordered list. Items in no particular order.
• <ol> — ordered list. Items in a meaningful sequence.
• <li> — a list item. Must be a direct child of <ul> or <ol>.
• Nested lists: place the inner <ul> or <ol> inside an <li>, never directly inside the outer list.
• <dl>, <dt>, <dd> — description lists for term–value pairs: glossaries, FAQs, metadata.
• Navigation menus use <nav> + <ul> + <li> + <a>. Lists give navigation its semantic structure.
• Lists are structural tools. CSS handles their visual appearance.