HTML Lists

Lists group related items — ingredients, features, steps, search results. HTML gives you three list types, and choosing the right one is a matter of meaning.

Unordered lists: <ul>

Use when item order does not matter. Bullets appear by default.

<ul>
  <li>Bread flour</li>
  <li>Active sourdough starter</li>
  <li>Fine sea salt</li>
  <li>Filtered water</li>
</ul>

Expected output: four bullet points stacked vertically with spacing.

Ordered lists: <ol>

Use when sequence matters — steps, rankings, instructions.

<ol>
  <li>Mix flour and water; rest 30 minutes.</li>
  <li>Add starter and salt; knead until smooth.</li>
  <li>Bulk ferment for 4–6 hours, folding every 45 minutes.</li>
  <li>Shape, proof overnight, bake at 240°C.</li>
</ol>

Expected output: numbered items 1–4 in order.

Changing the start or numbering style

<ol start="5"><li>Fifth item continues from 5</li></ol>
<ol type="a"><li>Letters: a, b, c</li></ol>
<ol type="I"><li>Roman numerals: I, II, III</li></ol>
<li value="3">Force this item to be 3</li>

Description lists: <dl>

Pairs of terms and descriptions — glossaries, specs, FAQs, metadata.

<dl>
  <dt>Starter</dt>
  <dd>A live culture of flour and water used to leaven bread.</dd>
  <dt>Autolyse</dt>
  <dd>A rest period where flour hydrates before salt is added.</dd>
</dl>

Expected output: each bold term followed by its indented definition.

Nested lists

Put a whole list inside an <li> to create sub-steps:

<ol>
  <li>Prepare the dough
    <ol>
      <li>Weigh 500 g flour</li>
      <li>Add 350 g water</li>
    </ol>
  </li>
  <li>Bake</li>
</ol>

Expected output: "1. Prepare the dough" with an indented "1.1 / 1.2" beneath it, then "2. Bake".

Styling hooks

Lists ship with default bullets, but CSS controls them entirely:

<!-- CSS example: no bullets + custom check marks -->
<ul class="checklist">
  <li>Validated with the W3C checker</li>
  <li>Tested on mobile</li>
</ul>

.checklist { list-style: none; padding-left: 0; }
.checklist li::before { content: "✓ "; color: #16a34a; font-weight: 700; }

Real-life use cases

• Recipes: ingredients in a <ul>, steps in an <ol>.
• Pricing tables: feature bullets in <ul>.
• Sidebars: a <dl> of "Difficulty: Beginner · Time: 20 min · Prerequisites: None".
• Footer sitemaps: nested <ul> inside <nav>.

Common mistakes

• Ordered list for bullets, then manual numbers — do not type "1." inside <li>; that breaks when items reorder.
• List of links as bare <a> tags — wrap each in <li> inside a <ul> for semantics.
• Using lists purely for layout — fine as a hook, but modern CSS (grid/flex) handles layout without polluting markup.
• Missing <li> wrapper — only <li>, <script>, and <template> may sit directly inside <ul>/<ol>.

Best practices

• Let the browser number <ol> items — it guarantees correctness with dynamic content.
• Keep list items parallel in grammar ("Weigh flour", "Add water" — not "Weighing flour").
• For menus/navigation, combine with <nav> as shown in Links & Navigation.

What's next?

When items have columns and headers, you need a Table instead. For input collection, continue to Forms & Inputs.