HTMLLesson 5 of 10Jump to practice

Lists

Group items with ul for bullet points and ol for numbered steps.

Lists are everywhere on the web: menus, shopping lists, steps, search results. HTML has two main kinds.

Element Name Shows Use it when
<ul> Unordered list Bullet points The order doesn’t matter
<ol> Ordered list Numbers The order matters

Inside either one, every item is an <li> (list item).

Bulleted lists

A shopping list
Open in editor
<h3>Shopping list</h3>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Peanut butter</li>
</ul>
Result

Numbered lists

The browser does the numbering for you. Add an item in the middle and every number after it updates.

Steps to make tea
Open in editor
<h3>Making tea</h3>
<ol>
<li>Boil the water</li>
<li>Add the tea leaves</li>
<li>Add milk and sugar</li>
<li>Strain and serve</li>
</ol>
Result

Two useful attributes for <ol>:

  • start="5" begins counting at 5.
  • reversed counts down instead of up.

Lists inside lists

To nest a list, put the whole inner list inside an <li>.

A nested list
Open in editor
<ul>
<li>Fruit
  <ul>
    <li>Apple</li>
    <li>Banana</li>
  </ul>
</li>
<li>Vegetables
  <ul>
    <li>Potato</li>
    <li>Spinach</li>
  </ul>
</li>
</ul>
Result

Practice

Check what you just learned. Fill in the missing code, then answer the quiz.

  1. Exercise 1

    Turn these items into a bulleted list.

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

  2. Exercise 2

    Every item in a list uses the same element. Fill it in.

    <ol>
  <>Boil the water</>
  <li>Add the tea leaves</li>
</ol>

  3. Exercise 3

    Make this numbered list start counting at 5.

    <ol ="5">
  <li>Fifth step</li>
  <li>Sixth step</li>
</ol>

Quiz: 3 questions

1. Which list numbers its items automatically?
2. What may go directly inside a <ul>?
3. How do you make a list inside another list?

Finish the practice to complete this lesson.