Lists

A club page may list things to bring or explain registration steps. Both contain items, but only one requires a particular order. HTML lists express this relationship without manually typing bullets or numbers.

Unordered items

ul means unordered list; each item uses li, meaning list item:

<ul>
  <li>A book</li>
  <li>A water bottle</li>
  <li>A notebook</li>
</ul>

The browser supplies bullets and indentation. Add another li to add an item; do not use three p elements as the direct items of ul.

Ordered steps

ol means ordered list. It also contains li elements:

<ol>
  <li>Read the event information</li>
  <li>Fill in the registration form</li>
  <li>Collect your seat card</li>
</ol>

The browser updates numbering when you insert an item. Do not also type “1.” into the text. When continuing an earlier list, start="4" on ol starts numbering at four; normal lists do not need it.

Nested items and descriptions

To list types of books under a Books item, put a child ul inside that li, then close the outer li. This explicitly connects the child list to its parent item. Close inner elements first.

A description list uses dl with dt for a name or term and dd for its description. It does not use li. Time–Saturday at ten and Place–Reading Center are examples of paired information.

Compare the packing list and registration steps in the Lab. Insert and remove an li to observe automatic numbering. The second example includes a description list so you can compare steps with name–description pairs.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Leaflet Club</title>
</head>
<body>
  <h1>Bring these items</h1>
  <ul>
    <li>Books
      <ul>
        <li>A novel</li>
        <li>A poetry collection</li>
      </ul>
    </li>
    <li>A water bottle</li>
  </ul>
</body>
</html>