HTML Lists

HTML has three list types: unordered, ordered, and description lists. Each <li> (list item) needs to sit inside one of the first two.

Unordered lists

Use <ul> when the order of items doesn’t matter.

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Ordered lists

Use <ol> when the order matters, like steps in a recipe.

<ol>
  <li>Preheat the oven</li>
  <li>Mix the batter</li>
  <li>Bake for 25 minutes</li>
</ol>

By default, an ordered list numbers from 1. Use the start attribute to begin somewhere else, or reversed to count down:

<ol start="5">
  <li>Fifth item</li>
  <li>Sixth item</li>
</ol>

Description lists

Use <dl> for a list of terms and their descriptions, like a glossary. Each term (<dt>) is paired with one or more descriptions (<dd>).

<dl>
  <dt>HTML</dt>
  <dd>Structures the content of a web page.</dd>

  <dt>CSS</dt>
  <dd>Styles the appearance of a web page.</dd>
</dl>

Nesting lists

A list can nest inside a list item:

<ul>
  <li>
    Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend</li>
</ul>

Why use a list element at all

Screen readers announce list elements as a group and tell the user how many items are in it, for example “list, 3 items”. That only happens if you use real <ul>/<ol>/<li> elements. A row of <div>s with no list markup gives none of that information, even if it looks identical.

Common mistakes

Putting content directly inside <ul> or <ol> without wrapping it in <li>.
Using a list just to add bullet styling to unrelated content. If the items aren’t actually a group of related things, a list isn’t the right element, style with CSS instead.
Nesting a <ul> outside of an <li>. The nested list belongs inside the parent item.