Lists

Lists are everywhere on the web. Recipe ingredients, navigation menus, feature lists, top tens, to-do items — whenever you need to group related items, a list is the way to go.

HTML gives you two main types of lists: unordered lists with bullet points and ordered lists with numbers. Both use the same basic structure.

Unordered Lists

Use an unordered list when the order of items does not matter. Wrap everything in a <ul> tag and each item in an <li> (list item) tag.

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Oranges</li>
  <li>Grapes</li>
</ul>

Ordered Lists

Use an ordered list when the sequence matters — steps in a recipe, rankings, instructions. Use <ol> instead of <ul>. The browser automatically numbers each item.

<ol>
  <li>Preheat the oven to 350°F</li>
  <li>Mix flour, sugar, and eggs</li>
  <li>Pour batter into a pan</li>
  <li>Bake for 30 minutes</li>
</ol>

Nesting Lists

Lists can go inside lists. This is called nesting, and it is perfect for creating subcategories or multi-level outlines. Just put a new <ul> or <ol> inside an <li>.

<ul>
  <li>Fruits
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
      <li>Oranges</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrots</li>
      <li>Broccoli</li>
      <li>Spinach</li>
    </ul>
  </li>
</ul>

You can nest as deep as you need, but going more than three levels deep usually means your information is too complex and could be organized better.

List Styling Tips

By default, <ul> uses solid black dots and <ol> uses numbers. You can change this with CSS later — swapping dots for squares, numbers for roman numerals, or even removing the bullets entirely.

But for now, just focus on the structure. Lists are one of those HTML elements you will use in almost every page you build, so get comfortable with them.