Lists and Nested Lists

Unordered Lists

When you want to display a list of items where the order does not matter (like a grocery list), you use an unordered list.

Unordered lists are created using the <ul> tag. Inside the <ul>, each individual item is wrapped in a list item tag: <li>. Browsers typically render unordered lists with bullet points.

Syntax / Structure

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

Ordered Lists

When the sequence of the items does matter (like a recipe or a top-10 list), you use an ordered list.

Ordered lists use the <ol> tag. Inside, you still use the exact same <li> tag for the items! The browser automatically numbers them for you (1, 2, 3…).

Code Example

<p>How to make toast:</p>
<ol>
  <li>Put bread in the toaster.</li>
  <li>Push the lever down.</li>
  <li>Wait for it to pop up.</li>
  <li>Add butter.</li>
</ol>

Nested Lists

You can put a list inside another list! This is called nesting.

To do this properly, the nested list must go inside an <li> element of the parent list.

Code Example

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Orange</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrot</li>
      <li>Broccoli</li>
    </ul>
  </li>
</ul>

Try It Yourself

Try creating a top-3 list of your favorite movies using an ordered list!

Key Takeaways

• Use <ul> for lists where order doesn’t matter (bullet points).
• Use <ol> for lists where order matters (numbered).
• Both list types use the <li> (list item) tag for the actual content.
• Lists can be nested inside one another by placing a new list inside an <li>.