Goal
You’ll be able to choose correctly between ordered, unordered, and description lists, and nest lists properly for genuinely hierarchical content like a multi-level menu.
Learn
HTML has three distinct list types, each with a specific semantic meaning, not just a visual bullet-vs-number choice:
Unordered list — for items with no meaningful sequence:
<ul> <li>Milk</li> <li>Bread</li> <li>Eggs</li> </ul>
Ordered list — for items where sequence genuinely matters, like steps in a process:
<ol> <li>Preheat the oven</li> <li>Mix the ingredients</li> <li>Bake for 20 minutes</li> </ol>
Description list — for term/definition pairs, like a glossary:
<dl> <dt>HTML</dt> <dd>A markup language for structuring web content.</dd> </dl>
Lists can be nested to represent genuine hierarchy, like a multi-level navigation menu — a <ul> or <ol> placed directly inside an <li> of a parent list:
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
</li>
</ul>
Decision Task
You’re marking up a recipe’s step-by-step instructions, where the exact order genuinely matters for the recipe to work. Before reading on: <ul> or <ol>?
Show Answer
<ol> (ordered list) — the numbered sequence carries real meaning here (step 1 must happen before step 2), which <ol> communicates both visually (with numbers) and semantically to assistive technology, unlike <ul> which implies no particular order.
Common Mistake
Using <ul> for genuinely sequential content, like numbered instructions, just because a developer wants bullets instead of numbers visually. If the sequence actually matters to understanding the content, <ol> is the semantically correct choice — visual bullet-vs-number styling can be changed with CSS if needed, but the underlying semantic meaning should still match the content’s real nature.
Practice Questions
1. A glossary page defines several technical terms, each followed by its definition. Which list type fits best?
Show Answer
<dl> (description list), using <dt> for each term and <dd> for its definition.
2. Write a nested list: an unordered list with one item “Colors” containing a nested unordered list of “Red” and “Blue”.
Show Answer
<ul><li>Colors<ul><li>Red</li><li>Blue</li></ul></li></ul>
3. Why might using <ol> instead of <ul> for a numbered set of top-10 rankings matter semantically, not just visually?
Show Answer
The ranking order is genuinely meaningful content (position 1 is different from position 10), which <ol> correctly communicates as sequential/ordered data, not just an arbitrary bulleted collection.
4. True or False: a nested list requires the inner <ul> or <ol> to be placed as a sibling of <li>, not inside it.
Show Answer
False — a properly nested list places the inner list directly inside the parent <li> element, not alongside it as a sibling.
5. What are the three HTML list types, and what specific kind of content does each represent?
Show Answer
<ul> for unordered/no-sequence items, <ol> for genuinely sequential/ordered items, <dl> for term/definition pairs.
Try It Yourself
Without looking back, mark up a two-level nested ordered list: step 1 “Gather materials” containing a nested list of “Wood” and “Nails” as sub-items, followed by step 2 “Begin assembly”.
Show Answer
<ol><li>Gather materials<ol><li>Wood</li><li>Nails</li></ol></li><li>Begin assembly</li></ol> — the nested ol sits inside the first li, before that li closes.
Quick Check
1. Which list type is for items with no meaningful order?
Show Answer
<ul>
2. Which list type is for genuinely sequential content?
Show Answer
<ol>
3. Which list type is for term/definition pairs?
Show Answer
<dl>
4. What two elements are used inside a description list for each term and its definition?
Show Answer
<dt> for the term, <dd> for the definition.
5. Where does a nested list get placed to represent proper hierarchy?
Show Answer
Directly inside the parent list’s <li> element, not as a sibling of it.