Lists

What you'll learn

• How to make bulleted and numbered lists.
• How to put a list inside another list.
• How to list terms with their descriptions.

The idea

Lists are everywhere on the web: menus, recipes, steps, features. HTML has three kinds.

Unordered lists: when order doesn't matter

<ul> (unordered list) shows bullet points. Each item is an <li> (list item):

<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Bread</li>
</ul>

Ordered lists: when order matters

<ol> (ordered list) numbers the items automatically, so you can add or remove steps without renumbering:

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

Useful attributes: start="5" starts counting at 5, reversed counts down, and type="A" uses letters.

Lists inside lists

Put the inner list inside an <li>:

<ul>
  <li>Fruit
    <ul>
      <li>Apples</li>
      <li>Pears</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

Description lists

<dl> pairs terms (<dt>) with their descriptions (<dd>). They're good for glossaries and FAQs:

<dl>
  <dt>HTML</dt>
  <dd>The language for the structure of web pages.</dd>
  <dt>CSS</dt>
  <dd>The language for how web pages look.</dd>
</dl>

Screen readers announce lists and how many items they have ("list, 3 items"), which helps people understand the page. That's why you should use real lists instead of lines of text that start with dashes.

Try it

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Lists</title>
</head>
<body>
  <h1>Pancakes</h1>

  <h2>You'll need</h2>
  <ul>
    <li>200 g flour</li>
    <li>2 eggs</li>
    <li>300 ml milk</li>
    <li>Toppings
      <ul>
        <li>Lemon and sugar</li>
        <li>Maple syrup</li>
      </ul>
    </li>
  </ul>

  <h2>Method</h2>
  <ol>
    <li>Whisk the flour, eggs and milk.</li>
    <li>Rest the batter for 30 minutes.</li>
    <li>Fry each pancake for about a minute on each side.</li>
  </ol>

  <h2>Words to know</h2>
  <dl>
    <dt>Batter</dt>
    <dd>A runny mixture of flour, eggs and milk.</dd>
    <dt>Whisk</dt>
    <dd>To beat quickly to add air.</dd>
  </dl>
</body>
</html>

Your turn

1. Add a fourth step to the method; notice the number appears automatically.
2. Add a third topping to the nested list.
3. Make a new <ul> of three hobbies, and a <dl> explaining one word from each hobby.

Common mistakes

• Putting text directly in <ul> or <ol>. Only <li> elements can be direct children of a list.
• Nesting a list outside an <li>. The inner <ul> must be inside an item.
• Typing numbers yourself (<li>1. Mix</li>) in an ordered list. You'll get "1. 1. Mix".
• Fake lists made with <br> and dashes. Screen readers can't tell they're lists.

Key points

• <ul> for bullets, <ol> for numbered steps, <li> for each item.
• Nest a list by putting it inside an <li>.
• <dl>, <dt> and <dd> pair terms with descriptions.
• Real lists help screen-reader users and are easy to style later with CSS.