Using Lists in HTML

HTML lists help you create itemized content. There are two main types: unordered and ordered lists. Lists provide structure and clarity.

Unordered List (ul)

The <ul> tag creates an unordered list, typically shown with bullet points. Each list item is wrapped in an <li> tag.

<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Cheese</li>
</ul>

Ordered List (ol)

The <ol> tag creates an ordered list, where items are numbered. Use this when the sequence of items matters, such as steps or instructions.

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

Nested Lists

HTML allows you to place lists inside other lists. This is useful when you want to include subcategories under main items.

<ul>
  <li>Fruits
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

When to Use Lists

Use lists whenever you need to present items — like to-do lists, ingredients, steps, or categories. Choose the right type: ordered if sequence matters, unordered if it doesn’t.