Lists in HTML

Welcome to another exciting step in your web development journey! Whether you are looking at a recipe's ingredients, a shopping checklist, or a ranking of favorite movies, lists are everywhere on the internet. They help keep information visually organized and easy to read. Let's explore how to build these essential structures using HTML!

The Core Building Block: The List Item (<li>)

Think of a list as a big container, and the items inside as the actual contents. Before we decide what kind of container to use, we need to know how to wrap our individual contents. In HTML, every single item in your list must be wrapped in an <li> tag.

The letters li simply stand for "list item". Whether your final list uses bullet points or numbers, every individual piece of text inside it must live within an <li> tag. It is the universal way to tell the web browser, "Hey, this is one specific item in my list."

Unordered Lists (<ul>)

Sometimes, the exact sequence of your items simply does not matter. Think of a standard grocery list: it makes no difference if you grab milk before apples, or apples before milk.

For these flexible situations, we use an Unordered List, which you create using the <ul> tag. When you wrap your list items in a <ul> tag, the browser will automatically place neat little bullet points (small black circles) next to each item.

<ul>
  <li>Apples</li>
  <li>Milk</li>
  <li>Bread</li>
</ul>

Ordered Lists (<ol>)

Other times, the sequence of your items is incredibly important. If you are writing step-by-step instructions for baking a cake, or counting down your top 10 favorite television shows, the order is absolutely key.

For this, we use an Ordered List, which you create with the <ol> tag. Instead of using bullet points, the web browser will automatically number these items for you in a strict sequence.

<ol>
  <li>Preheat the oven.</li>
  <li>Mix the ingredients.</li>
  <li>Bake for 30 minutes.</li>
</ol>

Nesting Lists (The Golden Rule)

As you build more complex websites, you will eventually want to put a list inside of another list. For example, you might have a main navigation menu with a sub-menu, or a to-do list where one big task contains smaller sub-tasks.

Here is the absolute Golden Rule of nesting lists—and the easiest way to avoid a very common beginner mistake:

If you want to put a list inside another list, the inner list (your new <ul> or <ol>) MUST go completely inside an existing <li> tag.

An inner list cannot float freely on its own inside the main <ul> or <ol> container. It must live safely tucked inside a specific list item.

<ul>
  <li>Clean the kitchen</li>
  <li>Buy groceries
    <ul>
      <li>Eggs</li>
      <li>Cheese</li>
    </ul>
  </li>
  <li>Walk the dog</li>
</ul>

Notice how the inner <ul> of groceries is completely contained before the closing </li> tag of the "Buy groceries" item? That is the secret to perfect formatting!

Summary

You are now ready to organize the web! Let's quickly reinforce the main takeaways:

• The <li> Tag: Wraps every single item in your list, no matter what.
• The <ul> Tag: Used for Unordered Lists where order doesn't matter, creating automatic bullet points.
• The <ol> Tag: Used for Ordered Lists where sequence matters, creating automatic numbers.
• Nesting: Always place nested inner lists directly inside an existing <li> tag.