Lists

Course 1 · Ch 3

Lists

Ordered lists, unordered lists, and definition lists — and choosing the right one for the content

HTML provides three distinct list types, and each one carries a specific meaning — using the right one matters for the same semantic reasons covered in Chapter 2's heading and text-formatting discussion.

Unordered Lists — <ul>

For items where order doesn't matter — a list of features, ingredients, or general bullet points.

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

HTML
CSS
JavaScript

Ordered Lists — <ol>

For items where sequence genuinely matters — steps in a recipe, ranked results, instructions that must happen in order.

<ol>
  <li>Preheat the oven</li>
  <li>Mix the ingredients</li>
  <li>Bake for 20 minutes</li>
</ol>

Preheat the oven
Mix the ingredients
Bake for 20 minutes

Choosing ul vs ol isn't about how it should look — CSS can restyle either one

A common beginner mistake is picking <ol> because numbers are wanted visually, or <ul> because bullets are wanted — but CSS can make an ordered list show bullets, or an unordered list show numbers, entirely independent of the tag used. The choice should be based purely on whether sequence is semantically meaningful to the content, not on the default visual style.

Useful <ol> attributes

<ol start="5"> ...starts counting from 5 instead of 1
<ol reversed> ...counts downward instead of up

Nested Lists

A <ul> or <ol> can be nested inside an <li> of another list, to any depth — useful for sub-steps or hierarchical groupings.

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

Definition Lists — <dl>

The least commonly used of the three, but exactly right for term/definition pairs — a glossary, a list of metadata key-value pairs, FAQ-style content.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — the structure of a web page.</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets — the visual presentation of a page.</dd>
</dl>

HTML: HyperText Markup Language — the structure of a web page.
CSS: Cascading Style Sheets — the visual presentation of a page.

<dl>

The wrapping element — "definition list."

<dt>

"Definition term" — the thing being defined.

<dd>

"Definition description" — the explanation. Multiple <dd> per <dt> are allowed, for several definitions of the same term.

Choosing the Right List Type

Sequence matters? Use <ol> — steps, rankings, instructions.
Sequence doesn't matter? Use <ul> — features, general groupings, navigation menus (a very common real-world use, often styled to look nothing like a bulleted list via CSS).
Term/explanation pairs? Use <dl> — glossaries, metadata, FAQs.

Navigation menus are almost always built from <ul> under the hood

A site's main navigation bar — even one that visually looks like a row of buttons with no bullets at all — is conventionally marked up as a <ul> of links, then heavily restyled with CSS. The semantic meaning ("this is a list of navigation options") stays intact for screen readers and search engines, even though the bullets and vertical stacking are completely styled away.

Chapter 3 Quick Reference

<ul> — unordered, sequence doesn't matter; <ol> — ordered, sequence matters
<li> — each list item, used inside either <ul> or <ol>
start / reversed attributes on <ol> control numbering behaviour
Choosing ul vs ol is about semantic sequence meaning, not visual bullets vs numbers — CSS can restyle either
Lists nest inside <li> elements to any depth
<dl>/<dt>/<dd> — definition lists for term/explanation pairs (glossaries, FAQs, metadata)
Navigation menus are conventionally a <ul> of links, however differently they end up styled
Next chapter: links & navigation — the anchor tag, attributes, relative vs absolute URLs