Lists

Structure grouped content with unordered lists, ordered lists, nested lists, and description lists, choosing the right list type for the relationship between items.

A huge amount of real content is naturally list-shaped: steps in a process, ingredients, navigation menus, terms and their definitions, feature bullet points. HTML gives you three distinct list types, each communicating a different relationship between its items — choosing the right one matters for both meaning and accessibility.

Unordered Lists: <ul>

<ul> creates a list where the order of items doesn't matter — items are typically rendered with bullet points. Each item inside is wrapped in an <li> (list item) element. Use <ul> when you're listing things where reordering them wouldn't change the meaning: features, ingredients (when quantity/order isn't sequential), navigation links, tags.

Ordered Lists: <ol>

<ol> creates a list where sequence matters — items are numbered by default. Use it for steps in a process, rankings, or anything where changing the order would change the meaning.

<ol> supports several useful attributes beyond the default numbering: start sets the number the list begins counting from, type changes the numbering style (1, A, a, I, or i), and reversed counts the list downward instead of up — handy for countdowns or 'most recent first' lists.

• start="5" — begins numbering at 5 instead of 1 • type="A" — numbers as A, B, C... (also a, I, i) • reversed — counts down (e.g. 5, 4, 3, 2, 1) instead of up

Nesting Lists

Lists can contain other lists, which is how you represent hierarchical, tree-like data — a table of contents with sub-sections, a folder structure, a multi-level outline. A nested list goes inside the <li> of its parent item, not as a sibling after it.

Nesting deeply is legal but hurts readability past two or three levels — beyond that, consider restructuring the content instead.

Description Lists: <dl>, <dt>, <dd>

The third list type is different in shape: <dl> (description list) pairs terms with their descriptions, ideal for glossaries, metadata, FAQs, or key-value data. Each term goes in a <dt> (description term), immediately followed by one or more <dd> (description details) elements describing it.

A single <dt> can be followed by multiple <dd> elements if a term has several descriptions or values, and a single <dd> can follow multiple consecutive <dt> elements if several terms share one description — this flexibility is unique to description lists among HTML's list types.

Choosing the Right List Type

Ask whether order matters (ol vs ul), and whether the content is really a set of term/definition pairs rather than a flat collection of items (dl vs ul/ol). Using the semantically correct list type isn't just aesthetic — screen readers announce list type and item count ('list, 5 items'), which helps users navigate and understand the structure of the content.

The Three List Types

<li> is used inside both <ul> and <ol> <dt>/<dd> pairs are used only inside <dl>, never <li>

<ul>
  <li>Unordered item</li>
</ul>

<ol start="3" type="A">
  <li>Ordered item</li>
</ol>

<dl>
  <dt>Term</dt>
  <dd>Its description</dd>
</dl>

Code Examples

A flat bulleted list — the order these tools are listed in has no particular meaning.

start="2" makes the first item Roman numeral II (because type="I" is uppercase Roman numerals), continuing III, IV, and so on — useful when this list is a continuation of steps described elsewhere.

<ol start="2" type="I"> reversed makes this three-item list count down as 3, 2, 1 instead of the default 1, 2, 3 — fitting for a countdown-style announcement order.

The nested <ul> lives inside Chapter 1's <li>, right after its text, which is how HTML represents that the sub-items belong under that specific parent item rather than being separate top-level entries.

Common mistake: Placing the nested <ul> after the </li> instead of inside it would make it a sibling of Chapter 1, not a child.

Each <dt> introduces a term and the <dd> immediately after it gives that term's definition — a natural fit for a glossary, where <ul> or <ol> would lose the explicit term-to-definition relationship.

<ul>
  <li>Multimeter</li>
  <li>Soldering iron</li>
  <li>Breadboard</li>
</ul>

<ol start="2" type="I">
  <li>Connect the power supply</li>
  <li>Verify voltage with a multimeter</li>
  <li>Enable the output</li>
</ol>

<ol reversed>
  <li>Announce the winner</li>
  <li>Announce second place</li>
  <li>Announce third place</li>
</ol>

<ul>
  <li>Chapter 1: Circuits
    <ul>
      <li>1.1 Series Circuits</li>
      <li>1.2 Parallel Circuits</li>
    </ul>
  </li>
  <li>Chapter 2: Semiconductors</li>
</ul>

<dl>
  <dt>Voltage</dt>
  <dd>The electrical potential difference between two points, measured in volts.</dd>

  <dt>Current</dt>
  <dd>The rate of flow of electric charge, measured in amperes.</dd>

  <dt>Resistance</dt>
  <dd>Opposition to current flow, measured in ohms.</dd>
</dl>

Nested Unordered List Structure

Item C's nested list (C1, C2) sits inside C's own <li>, representing a parent-child relationship.

Shopping List
+-- Item A
+-- Item B
+-- Item C
    +-- Sub-item C1
    +-- Sub-item C2

Important Rules

Use <ul> when item order carries no meaning.

Use <ol> when sequence matters, and reach for start/type/reversed when the default 1, 2, 3 numbering doesn't fit.

Nest a child <ul>/<ol> inside the parent <li>, not after it.

Use <dl>/<dt>/<dd> for term-definition pairs, not <ul>/<ol> styled to look similar.

Where This Shows Up

Navigation menus are almost always built from <ul><li> under the hood (even when CSS makes them look like a horizontal bar with no bullets), recipe instructions use <ol>, and API documentation glossaries commonly use <dl> for term/definition pairs.

<ul> <li>Step 1: Preheat the oven</li> <li>Step 2: Mix the batter</li> <li>Step 3: Bake for 20 minutes</li> </ul>

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

These steps must happen in a specific sequence, so this is an ordered list — using <ul> loses that semantic meaning even if you manually number the text.

<ul> <li>Item A</li> <ul> <li>Sub-item A1</li> </ul> </ul> <ul> <li>Item A <ul> <li>Sub-item A1</li> </ul> </li> </ul>

A nested <ul> must be placed inside an <li>, not as a direct child of the outer <ul> alongside other <li> elements — a bare <ul> can only validly contain <li> children.

[Choose the Correct Syntax] You need a numbered list that starts counting at 10 and uses lowercase letters (a, b, c...) instead of numbers. Which opening tag is correct? A. <ol start="10" type="a"> B. <ol first="10" style="a"> C. <ul start="10" type="a"> D. <ol start="10" numbering="lowercase">

A. <ol start="10" type="a"> — start="10" sets the beginning count, and type="a" switches the marker style to lowercase letters. <ul> has no numbering concept at all, and 'first' and 'numbering' are not real HTML attributes.

Build a two-level nested ordered list for 'Lab Safety Procedure' with steps, where step 2 ('Put on protective equipment') has its own two sub-steps.

<ol> <li>Enter the lab and sign in</li> <li>Put on protective equipment <ol> <li>Safety goggles</li> <li>Lab coat and gloves</li> </ol> </li> <li>Begin the experiment</li> </ol>

The nested <ol> goes inside step 2's <li>, after its text.