Lists

Lists organise enumerations: shopping items, recipe steps, site menu entries. HTML has three kinds of lists — bulleted, numbered and description lists. Each list item is a separate element.

A bulleted list

The <ul> tag (unordered list) creates a list, and each item is wrapped in <li> (list item):

<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Cheese</li>
</ul>

The browser put a bullet in front of each item and indented the list.

A numbered list

If the order matters, use <ol> (ordered list). The browser adds the numbers itself:

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

Add an item in the middle and the numbering updates — there is no need to fix the numbers by hand.

Numbering options

<ol start="3">
  <li>Third place</li>
  <li>Fourth place</li>
</ol>
<ol reversed>
  <li>Three</li>
  <li>Two</li>
  <li>One</li>
</ol>

Nested lists

You can put a whole list inside an item. The nested list goes inside <li>, before its closing tag:

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

For the nested list the browser changes the bullet style — to a hollow circle.

A description list

<dl> (description list) holds "term — explanation" pairs: a glossary, product specs, questions and answers. <dt> is the term, <dd> is its description:

<dl>
  <dt>Espresso</dt>
  <dd>Strong coffee brewed under pressure.</dd>
  <dt>Latte</dt>
  <dd>Espresso with plenty of milk.</dd>
</dl>

Lists in navigation

A site menu is also a list of links. It is usually built with <ul>, and the bullets and indentation are removed in CSS:

<ul style="list-style: none; padding: 0;">
  <li><a href="#">Home</a></li>
  <li><a href="#">Menu</a></li>
  <li><a href="#">Contacts</a></li>
</ul>

This way a screen reader announces "list, three items" — and the person knows the size of the menu right away.

Common mistake

Only <li> items may sit directly inside <ul> and <ol>. Text or a heading right inside a list is an error, even though the browser shows something that looks right:

<!-- Wrong -->
<ul>
  Shopping
  <li>Milk</li>
</ul>
 
<!-- Right -->
<p>Shopping:</p>
<ul>
  <li>Milk</li>
</ul>