HTML Tutorial / Lists: ul, ol, dl, and Nested Lists

Choose ol when the order of items matters, ul when it does not, and dl for names paired with descriptions or values. These elements describe relationships between items; their default numbers and bullets are only a presentation.

When should you use ol, ul, or dl?

Items in ol and ul use li. In a dl, dt supplies a name and dd supplies its description or value.

Try all three list types in one file

Save this code as an HTML file and open it in a browser to compare the default list presentations. The font is specified in CSS so the example and its screenshot have a consistent appearance.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HTML lists</title>
    <style>
      body { font-family: "Noto Sans KR", sans-serif; }
    </style>
  </head>
  <body>
    <h1>Planning a trip</h1>
    <h2>Supplies</h2>
    <ul>
      <li>Water</li>
      <li>Map</li>
    </ul>
    <h2>Steps</h2>
    <ol>
      <li>Choose dates</li>
      <li>Pack a bag</li>
    </ol>
    <h2>Terms</h2>
    <dl>
      <dt>Departure</dt>
      <dd>The day the trip begins</dd>
      <dt>Arrival</dt>
      <dd>The day you reach the destination</dd>
    </dl>
  </body>
</html>

CSS can change the indentation and marker styles. The important distinction is the order or name–description relationship expressed by the HTML.

Change an ordered list's numbering

An ol starts at 1 by default. Its start attribute changes the first number; value on a particular li changes that item's number.

<ol start="5">
  <li>Fifth step</li>
  <li value="9">Ninth step</li>
  <li>Tenth step</li>
</ol>

The markers are 5, 9, and 10. Use reversed when the numbering should descend.

<ol reversed>
  <li>Third item</li>
  <li>Second item</li>
  <li>First item</li>
</ol>

Placed on its own, this reversed list without a start value counts down from its three items as 3, 2, 1. Check whether the numbering matches the intended sequence.

Numbering attributes do not turn an unordered collection into a meaningful sequence. Choose the list type for its meaning first.

Pair names and descriptions with dl

A dl is not limited to dictionary definitions. It can pair a product property with its value or a date with its description. Keep each dt and its dd entries easy to associate.

<dl>
  <dt>Opening hours</dt>
  <dd>Weekdays, 9 a.m. to 6 p.m.</dd>
  <dt>Closed</dt>
  <dd>Saturday and Sunday</dd>
</dl>

These are fictional hours used only to demonstrate the markup.

Nest a list inside a list item

A sublist belongs inside the parent li that it expands. Here, the clothing items are a subset of the trip supplies. See Syntax for the inside-out nesting rule.

<ul>
  <li>Water</li>
  <li>Clothing
    <ul>
      <li>Jacket</li>
      <li>Socks</li>
    </ul>
  </li>
</ul>

You can also nest a ul inside an ol. In this example, the main steps have a meaningful order, but the two things to pack do not.

<ol>
  <li>Choose travel dates</li>
  <li>Pack a bag
    <ul>
      <li>Clothing</li>
      <li>Toiletries</li>
    </ul>
  </li>
  <li>Leave for the trip</li>
</ol>

Do not place a sublist directly under an outer ul or ol; put it inside the relevant li. Also avoid placing an entire list inside a p. Lists and paragraphs are separate structures.

List-writing checklist

• Decide whether item order changes the meaning before choosing ol or ul.
• Use li for each item of an ordered or unordered list.
• Make the dt–dd relationship clear in a description list.
• Put a sublist inside its parent li, and use CSS for marker appearance.

For more examples, see MDN's guide to HTML lists. To use a list in a real set of pages, start with the file structure in Build a Small Multipage Website.