HTML Lists: Ordered, Unordered and Description Lists

HTML lists help you group related items clearly. Learn how to make unordered lists with <ul>, ordered lists with <ol>, nested lists, and description lists with <dl>.

How to make an unordered list (ul)

Use an unordered list when the order of items does not matter, like a shopping list. The list is made with <ul>, and each item goes in an <li> (list item).

<h2>Ingredients</h2>
<ul>
  <li>3 ripe bananas</li>
  <li>200 g flour</li>
  <li>100 g sugar</li>
  <li>2 eggs</li>
  <li>1 teaspoon baking soda</li>
</ul>

The browser shows each item on its own line with a bullet point (a small dot) in front. It also indents the list a little.

The only element allowed directly inside a <ul> is <li>. You can put almost anything inside an <li> though: text, links, images or even another list.

How to make an ordered list (ol)

Use an ordered list when the order matters, like steps in a recipe or a top-10 ranking. Use <ol> instead of <ul>. The browser numbers the items for you.

<h2>Method</h2>
<ol>
  <li>Heat the oven to 175°C.</li>
  <li>Mash the bananas in a large bowl.</li>
  <li>Mix in the sugar, eggs and melted butter.</li>
  <li>Stir in the flour and baking soda.</li>
  <li>Bake for 60 minutes.</li>
</ol>

You will see the steps numbered 1 to 5. If you add a new step in the middle, the numbers update automatically. That is much easier than typing numbers by hand.

Useful ol attributes: start, reversed and type

• start="4" begins counting from 4, useful when a list continues after a paragraph.
• reversed counts down instead of up, perfect for a countdown.
• type changes the numbering style: "1" (numbers, the default), "a" or "A" (letters), "i" or "I" (Roman numerals).

<h2>Top 3 films of the year</h2>
<ol reversed>
  <li>The Quiet Harbour</li>
  <li>Northern Lights</li>
  <li>Paper Boats</li>
</ol>

<h2>Exam rules</h2>
<ol type="a">
  <li>Switch off your phone.</li>
  <li>Write in black or blue pen.</li>
</ol>

The first list counts down: 3, 2, 1. The second list uses a, b instead of numbers.

Tip: Choose <ul> or <ol> based on meaning: "does the order matter?" If yes, use <ol>. Don't choose just because you want numbers or bullets, because CSS can change the markers later.

How to make a nested list

A nested list is a list inside a list item. It is useful for sub-steps or categories.

<ul>
  <li>Fruit
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
    </ul>
  </li>
  <li>Dairy
    <ul>
      <li>Milk</li>
      <li>Cheese</li>
    </ul>
  </li>
</ul>

The browser shows "Fruit" and "Dairy" as main items, with their sub-items indented below them. Browsers usually use a different bullet shape for the inner level.

Common mistake: Putting the inner <ul> directly inside the outer <ul>, after a closing </li>. The inner list must go inside an <li>, before its closing </li> tag.

What is a description list (dl, dt, dd)?

A description list is for pairs of terms and descriptions, like a glossary or a list of questions and answers. It uses three elements:

• <dl> – the description list itself
• <dt> – a term (the word being described)
• <dd> – the description of that term

<h2>Baking glossary</h2>
<dl>
  <dt>Knead</dt>
  <dd>To press and fold dough with your hands to make it smooth and stretchy.</dd>

  <dt>Proof</dt>
  <dd>To let dough rest so that it rises before baking.</dd>

  <dt>Crumb</dt>
  <dd>The soft inside part of a loaf of bread.</dd>
</dl>

Each term appears on its own line, and its description appears below it, slightly indented. Description lists also work well for product details, like "Weight: 500 g" and "Colour: Blue".

Practice exercise

Write a page for a simple pancake recipe. Include an unordered list of ingredients, an ordered list of steps, and a step with two nested sub-steps. Finish with a description list explaining two cooking words.

Hint: the nested list goes inside the <li> of the step it belongs to.

Key takeaways

• Use <ul> when the order doesn't matter and <ol> when it does.
• Every item goes inside an <li>, and only <li> goes directly inside <ul> or <ol>.
• <ol> supports start, reversed and type to control numbering.
• Nest lists by placing a new list inside an <li>.
• Use <dl>, <dt> and <dd> for terms and their descriptions.