Lists

A shopping list and a recipe are both lists, but only one of them breaks if you change the order. HTML has a different element for each.

Unordered and ordered lists

If the order of the items does not matter, use an unordered list, <ul>. Browsers mark each item with a bullet. If the order does matter, as in the steps of a recipe or a ranking, use an ordered list, <ol>, and the browser numbers the items for you. In both cases every item is an <li>, a list item, and the only elements allowed directly inside <ul> or <ol> are <li> elements. Text and other elements go inside the items.

<h2>You will need</h2>
<ul>
  <li>500 g flour</li>
  <li>10 g salt</li>
  <li>350 ml warm water</li>
</ul>

<h2>Method</h2>
<ol>
  <li>Mix everything in a bowl.</li>
  <li>Leave it covered for 12 hours.</li>
  <li>Shape and bake at 230 degrees for 40 minutes.</li>
</ol>

Why not type the numbers or dashes yourself? Because then the browser does not know there is a list. A screen reader announces a real list with its length, for example list, 3 items, so the listener knows how much is coming and can skip past it. When you insert a step into an <ol>, every number after it updates by itself; with typed numbers you would renumber by hand.

Options for ordered lists

<ol> has a few attributes. start="4" begins the count at 4, useful when a list continues after a paragraph. reversed counts down, for a top ten. type switches the marker to letters or Roman numerals: type="a", type="A", type="i" or type="I". A single item can also jump to a number with value, as in <li value="10">. How the bullets and numbers look (their shape, colour, or whether they show at all) is controlled by CSS.

Lists inside lists

A list item can contain a whole list. Put the inner <ul> or <ol> inside the <li> it belongs to, after that item's text and before its closing tag. A common mistake is to place the inner list between two <li> elements, directly inside the outer list, which is not allowed. Nested lists are how sites build menus with submenus and how outlines show sub-points.

<ul>
  <li>Bread
    <ul>
      <li>Sourdough</li>
      <li>Rye</li>
    </ul>
  </li>
  <li>Cakes</li>
</ul>

Description lists

The third kind of list pairs terms with descriptions, like a glossary or a set of questions and answers. <dl> is the description list, <dt> holds a term, and <dd> holds its description. One term can have several descriptions, and several terms can share one. Browsers indent the descriptions by default.

Lists show up in places you might not expect. The menu at the top of most sites is a <ul> of links inside a <nav>; CSS lays the items out in a row and hides the bullets. A row of product cards or a set of search results is often a list too. When you see a group of similar things, ask whether it is a list; the answer is usually yes.

A quick way to choose between the two: imagine shuffling the items. If shuffling changes the meaning, as it would for the steps of a recipe or a top ten, the list is ordered and needs <ol>. If nothing changes, as with a packing list, use <ul>. Keep each item short and start items in the same grammatical way, so the list is easy to scan.