🎓 A1Learner
🔍

HTML Lists

A list is a group of items written with list elements. HTML has list kinds for plain items, ordered steps, and terms with descriptions.

An unordered list

The ul element makes a list where order does not matter. The browser marks each item with a bullet dot.

<ul>
<li>Apples</li>
<li>Bread</li>
<li>Milk</li>
</ul>

An ordered list

The ol element makes a list where order matters. The browser numbers the items in order.

<ol>
<li>Boil the water</li>
<li>Add the tea bag</li>
<li>Wait three minutes</li>
</ol>

A description list

The dl element pairs terms with descriptions. The dt element holds a term, and the dd element holds its description.

<dl>
<dt>HTML</dt>
<dd>The language for page structure</dd>
<dt>CSS</dt>
<dd>The language for page styling</dd>
</dl>

A list inside a list

A list can sit inside one item of another list. The inner list belongs to that one item.

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

Example

<!DOCTYPE html>
<html>
<head>
<title>Shopping and Steps</title>
</head>
<body>
<h1>Shopping and Steps</h1>
<h2>Shopping list</h2>
<ul>
<li>Eggs</li>
<li>Cheese</li>
<li>Spinach</li>
</ul>
<h2>Making tea</h2>
<ol>
<li>Boil the water</li>
<li>Pour it over the tea bag</li>
<li>Wait three minutes</li>
</ol>
</body>
</html>

Key points

  • ul element: a list where the order of items does not matter
  • ol element: a list where the order of items matters
  • li element: one item in a ul or an ol list
  • dl element: a list of terms and their descriptions
  • dt element: one term in a dl list
  • dd element: the description for one dt term
  • Each item in a list sits in its own element.

In this example, the page holds two lists. The shopping list is a ul because the order of items does not matter. Each item sits in an li element. The tea steps form an ol because the order matters. The browser numbers the tea steps by itself.

Note

The browser adds the numbers to an ol list by itself.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

Which element makes a list where the order of steps matters?