Lists

Headings and paragraphs carry most of a page, but some content isn't really a paragraph at all — it's a group of separate items: a grocery list, the steps in a recipe, the topics this course covers. HTML has an element built for exactly that: the list.

List items live inside a list

A list item — the li element — is one entry in a list. An li never stands on its own; it always nests inside one of the two list containers below, the same way head and body nest inside html. The list is the container, and each li is a child living inside it.

Unordered lists: when order doesn't matter

A ul — unordered list — holds items where the sequence carries no meaning. Your favorite snacks don't need ranking to be a list (whew):

<ul>
  <li>Pretzels</li>
  <li>Grapes</li>
  <li>Cheese</li>
</ul>

Browsers show a ul's items with bullet points by default, which is a visual hint that they're not in any particular order.

Ordered lists: when sequence matters

An ol — ordered list — holds items where the order genuinely matters, like steps in a recipe. Swap two steps and the recipe stops making sense:

<ol>
  <li>Boil the water</li>
  <li>Add the pasta</li>
  <li>Drain after ten minutes</li>
</ol>

An ol uses the same li element as a ul — the only difference is the container, and browsers number an ol's items automatically.

Common mistake

The most common list mistake is picking the wrong container: a ul for steps that must happen in a specific order, or an ol for a list where order genuinely doesn't matter (a bag of ingredients, say, where nothing depends on which is named first). Ask yourself one question: does swapping two items change the meaning? If yes, reach for ol. If no, ul is the right call. The other common slip is writing an li with no ul or ol around it at all — on its own, an li means nothing to a browser.

Build one of each kind below.

Exercise

Build an unordered list and an ordered list

Write a ul with exactly three items where the order doesn't matter (like favorite snacks), then write an ol with exactly three items where the order genuinely matters (like steps in a recipe). Every item is an li, nested inside the list it belongs to.