📋 Ordered, Unordered, and Definition Lists

Three Kinds of List

Whenever information naturally comes as a group of items, a list is the semantically correct container. HTML gives you three, and the right choice depends on one question: does the order matter, and is each item a pair?

Every list type shares the same core idea: a container element wraps a series of items. For <ul> and <ol>, each item is a <li>. For <dl>, items come in pairs of <dt> (term) and <dd> (description).

Unordered Lists

Reach for an unordered list when the items form a set but no particular order is implied. The browser renders each <li> with a bullet.

<ul>
  <li>Whole-wheat flour</li>
  <li>Active dry yeast</li>
  <li>Sea salt</li>
</ul>

Unordered lists are everywhere: navigation menus, feature bullets on a product page, recipe ingredients, tags on a blog post, and items in a shopping cart. Anytime you would write bullet points in a document, this is the element.

Ordered Lists

Use an ordered list when sequence matters — step-by-step instructions, rankings, or numbered clauses. The browser numbers the items for you, so you never hard-code "1.", "2.", "3." into the text.

<ol>
  <li>Mix the dry ingredients.</li>
  <li>Add milk, eggs, and melted butter.</li>
  <li>Whisk until just smooth.</li>
</ol>

Controlling the numbering

Three attributes shape how an ordered list counts:

<!-- A top-3 countdown, rendered with Roman numerals starting high -->
<ol type="I" reversed>
  <li>Bronze medal</li>
  <li>Silver medal</li>
  <li>Gold medal</li>
</ol>

Nesting Lists

Lists can contain other lists, letting you represent hierarchy — sitemaps, multi-level menus, outlines. The key rule: a nested list goes inside the <li> it belongs to, not between list items.

<ul>
  <li>Home</li>
  <li>Products
    <ul>
      <li>Category A
        <ul>
          <li>Product A1</li>
          <li>Product A2</li>
        </ul>
      </li>
      <li>Category B</li>
    </ul>
  </li>
  <li>Contact</li>
</ul>

You can freely mix types — an ordered list can hold an unordered sub-list, and vice versa. A tutorial's numbered steps might each carry a bulleted list of tips.

Definition Lists

The definition (description) list, <dl>, pairs terms with descriptions. Each term is a <dt> and each description a <dd>. It is the semantically correct choice for glossaries, FAQs, metadata, and specification tables.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — the structure of a page.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets — the presentation of a page.</dd>
</dl>

The pairing is flexible. One term can take multiple descriptions (several consecutive <dd>s), and multiple terms can share one description (several consecutive <dt>s):

<dl>
  <dt>Storage</dt>
  <dd>128 GB</dd>
  <dd>256 GB</dd>
  <dd>512 GB</dd>

  <dt>HTML</dt>
  <dt>HyperText Markup Language</dt>
  <dd>The standard markup language for web pages.</dd>
</dl>

Styling & Accessibility

Marker styling with CSS

Keep structure in HTML and appearance in CSS. The list-style-type property changes the marker, list-style-position sets inside/outside, and the modern ::marker pseudo-element styles the bullet or number directly.

/* Turn a nav list horizontal and strip its bullets */
.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
}

/* Color just the markers, not the text */
li::marker {
  color: var(--primary-color, #3b82f6);
  font-weight: 700;
}

For advanced numbering — "Chapter 1", "1.2", and the like — CSS counters give you full control while the HTML stays a clean <ol>:

ol.chapters {
  counter-reset: chapter;
  list-style: none;
}
ol.chapters > li {
  counter-increment: chapter;
}
ol.chapters > li::before {
  content: "Chapter " counter(chapter) ": ";
  font-weight: 700;
}

Why the semantics matter for accessibility

When a screen reader meets a real list, it announces useful context — "list, 3 items" — and reads each item with its position. That context vanishes if you fake a list with <div>s and CSS bullets. Nested lists are announced level by level, so proper nesting communicates hierarchy to users who can't see the indentation.

Hands-on Exercise

<h1>Chocolate Chip Cookies</h1>

<h2>Ingredients</h2>
<ul>
  <li>225 g butter, softened</li>
  <li>200 g brown sugar</li>
  <li>300 g plain flour</li>
  <li>200 g chocolate chips</li>
</ul>

<h2>Instructions</h2>
<ol>
  <li>Cream the butter and sugar until fluffy.
    <ul>
      <li>Tip: room-temperature butter creams best.</li>
    </ul>
  </li>
  <li>Beat in the egg and vanilla.</li>
  <li>Fold in flour, then the chocolate chips.</li>
  <li>Bake at 180°C for 11–13 minutes.</li>
</ol>

<h2>Nutrition (per cookie)</h2>
<dl>
  <dt>Calories</dt>
  <dd>210 kcal</dd>
  <dt>Sugar</dt>
  <dd>18 g</dd>
</dl>

Best Practices

Summary & Quiz

📚 Further Reading

• MDN — <ul> the unordered list
• MDN — <ol> the ordered list
• MDN — <dl> the description list

🚀 What's Next?

You can now structure content into blocks and lists. Next we zoom in on the inline level: the elements that add meaning and style to runs of text within those blocks — emphasis, code, quotations, abbreviations, and more.