Lists — Organising Information! 📋

Lists are everywhere on the web! Your YouTube watchlist, Spotify playlist, Amazon shopping cart — all built with HTML lists!

Two Types of Lists

1. Unordered List (Bullet Points) <ul>

Use when order doesn't matter:

<h2>My Favourite Foods 🍕</h2>
<ul>
  <li>Pizza</li>
  <li>Sushi</li>
  <li>Ice cream</li>
  <li>Tacos</li>
</ul>

This shows as:

• Pizza
• Sushi
• Ice cream
• Tacos

2. Ordered List (Numbered) <ol>

Use when order matters (rankings, steps, instructions):

<h2>Top 3 Games 🎮</h2>
<ol>
  <li>Minecraft</li>
  <li>Roblox</li>
  <li>Fortnite</li>
</ol>

This shows as:

1. Minecraft
2. Roblox
3. Fortnite

List Items: <li>

Every item in any list uses the <li> (list item) tag!

| Tag | Meaning | Use for | |-----|---------|---------| | <ul> | Unordered list | Bullet points | | <ol> | Ordered list | Numbered lists | | <li> | List item | Every item in both types! |

Nested Lists (Lists inside Lists!)

<ul>
  <li>Fruits 🍎
    <ul>
      <li>Apple</li>
      <li>Banana</li>
      <li>Mango</li>
    </ul>
  </li>
  <li>Vegetables 🥕
    <ul>
      <li>Carrot</li>
      <li>Broccoli</li>
    </ul>
  </li>
</ul>

🌟 Real World: Navigation Menus!

Most website navigation bars are actually just styled lists:

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

Add some CSS later and this becomes a proper nav bar! 🎨