HTML Lists

HTML provides two main list types for grouping related items: unordered lists for items with no required sequence, and ordered lists for items whose order matters. Lists can also be nested inside one another to represent hierarchical relationships, such as a table of contents or a multi-level menu.

Why it matters

Navigation menus, steps of a recipe, feature lists and glossaries are all lists, and marking them up as lists lets a screen reader announce how many items there are and move between them. Navigation menus in nearly every site you will inspect are an unordered list of links.

Unordered and Ordered Lists

An unordered list, <ul>, renders items with bullet points by default and is appropriate when the sequence of items doesn't matter — a list of features, ingredients, or navigation links. An ordered list, <ol>, renders items with numbers by default and should be used when sequence carries meaning — step-by-step instructions or a ranking. In both cases, each individual item is wrapped in an <li> (list item) element, and <li> is only valid as a direct child of <ul>, <ol>, or <menu>.

Nesting Lists

A nested list is created by placing an entire <ul> or <ol> inside an <li> of a parent list. This is how multi-level navigation menus, outlines, and file-tree-style structures are built in plain HTML, and browsers automatically indent and adjust bullet or number styles at each nested level.

Description Lists

A third, less common list type, <dl> (description list), pairs terms with their definitions using <dt> (term) and <dd> (description) elements. It's well suited to glossaries, metadata key-value pairs, or FAQ-style content.

Example

<ol>
  <li>Sign up for an account</li>
  <li>Choose a subscription plan
    <ul>
      <li>Basic</li>
      <li>Pro</li>
      <li>Enterprise</li>
    </ul>
  </li>
  <li>Start building your site</li>
</ol>

Renders a numbered list with three main steps; the second step shows a bulleted sub-list of three plan options indented beneath it.

Exercise

Write the steps for making tea as an ordered list with three steps: Boil water, Add the following and Pour and serve. Inside the second step, nest an unordered list with the items Tea leaves and Sugar.

Expected result: a numbered list from 1 to 3, with two bullet points indented under step 2.

<h2>How to make tea</h2>

<!-- TODO: ordered list with a nested unordered list in step 2 -->

<h2>How to make tea</h2>

<ol>
  <li>Boil water</li>
  <li>
    Add the following
    <ul>
      <li>Tea leaves</li>
      <li>Sugar</li>
    </ul>
  </li>
  <li>Pour and serve</li>
</ol>

Quick quiz

Interview questions