Lists
Display items in ordered (numbered) and unordered (bullet) lists — and nest them inside each other.
1. Introduction
Lists are everywhere on the web — navigation menus, step-by-step instructions, ingredient lists, feature comparisons, table of contents. Lists are one of the most frequently used HTML structures.
HTML provides three types of lists: unordered lists (bullet points), ordered lists (numbered), and description lists (term + definition pairs). In this lesson you will master all three.
2. Theory
Unordered List: <ul>
Use when the order does not matter — shopping lists, feature lists, navigation menus.
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul><ul> = the container. <li> = each list item. Browsers display bullets by default.
Ordered List: <ol>
Use when the order matters — steps, rankings, instructions.
<ol>
<li>Preheat oven to 200°C</li>
<li>Mix the ingredients</li>
<li>Pour into baking tin</li>
<li>Bake for 30 minutes</li>
</ol>Browsers automatically number these 1, 2, 3...
Ordered List Attributes
| Attribute | Example | Effect |
|---|---|---|
type | type="A" | Letters: A, B, C... |
type | type="I" | Roman numerals: I, II, III... |
start | start="5" | Starts numbering from 5 |
reversed | reversed | Counts down: 5, 4, 3... |
Description List: <dl>
Use for term-definition pairs — glossaries, metadata, FAQ lists.
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language — the structure of web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets — controls the visual appearance.</dd>
</dl><dl> = list container, <dt> = term, <dd> = definition (indented by default).
Nested Lists
Lists can be placed inside other lists — any <li> can contain another <ul> or <ol>.
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend
<ul>
<li>Node.js</li>
<li>Python</li>
</ul>
</li>
</ul>3. Real World Example
Look at the navigation menu at the top of any website — it is almost always an unordered list (<ul>) styled with CSS to appear horizontal. Navigation menus as lists is the professional standard.
Recipe websites use ordered lists for instructions (steps 1, 2, 3...) and unordered lists for ingredients (order of ingredients does not matter).
4. Code Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Recipe</title>
</head>
<body>
<h1>Chocolate Chip Cookies</h1>
<h2>Ingredients</h2>
<ul>
<li>2 cups plain flour</li>
<li>1 cup butter (softened)</li>
<li>3/4 cup white sugar</li>
<li>2 eggs</li>
<li>2 cups chocolate chips
<ul>
<li>Dark chocolate recommended</li>
<li>Or use milk chocolate</li>
</ul>
</li>
</ul>
<h2>Instructions</h2>
<ol>
<li>Preheat oven to 190°C (375°F)</li>
<li>Cream butter and sugar until fluffy</li>
<li>Beat in eggs one at a time</li>
<li>Gradually mix in flour</li>
<li>Stir in chocolate chips</li>
<li>Drop rounded tablespoons onto baking sheet</li>
<li>Bake for 9–11 minutes or until golden brown</li>
</ol>
<h2>Glossary</h2>
<dl>
<dt>Cream</dt>
<dd>To beat butter and sugar together until light and fluffy.</dd>
<dt>Softened butter</dt>
<dd>Butter left at room temperature for 30–60 minutes until soft enough to dent with your finger.</dd>
</dl>
</body>
</html>5. Code Breakdown
| Code | What It Does |
|---|---|
<ul> ... </ul> | Unordered list container. Creates a bullet-point list. |
<ol> ... </ol> | Ordered list container. Creates a numbered list. |
<li> ... </li> | A single list item. Works inside both <ul> and <ol>. |
Nested <ul> inside <li> | Creates a sub-list. Indented and with a different bullet style by default. |
<dl> | Description list container. |
<dt> | Description Term — the word being defined. |
<dd> | Description Definition — indented definition of the term. |
6. Common Mistakes
<li> must be a direct child of <ul>, <ol>, or (in rare cases) <menu>. Never put <li> inside a <div> or <p> directly.
Do not use <ul> to indent text visually — use CSS padding instead. Lists should be used only when content is genuinely list-like.
If the sequence is not important, use <ul>. If removing item 2 would make items 1 and 3 unclear, use <ol>.
7. Best Practices
<div> or <p> directly inside the list. Content goes inside the <li>.8. Practice Exercise
Create lists-practice.html with the following:
- An unordered list of 5 things you need to pack for a trip. One of them should have a nested unordered list with 3 sub-items.
- An ordered list of 5 steps to make a cup of tea or coffee.
- A description list defining 3 programming terms (you choose any three terms from what you have learned so far).
9. Assignment
Update your Recipe Page from the previous lesson's assignment. Replace the paragraph-based instructions with a proper ordered list. Replace the ingredients section with a proper unordered list. Add a <dl> glossary section at the bottom defining at least 3 cooking terms used in the recipe.
10. Interview Questions
Q1: What are the three types of lists in HTML?
Answer: 1) Unordered list (<ul>) — bullet points, order does not matter. 2) Ordered list (<ol>) — numbered, order matters. 3) Description list (<dl>) — term/definition pairs.
Q2: When should you use <ol> vs <ul>?
Answer: Use <ol> when the sequence matters — step-by-step instructions, rankings. Use <ul> when order does not matter — feature lists, shopping lists, navigation menus.
Q3: Can lists be nested? How?
Answer: Yes. Place a <ul> or <ol> inside a <li> element. The nested list must be inside the parent <li>, not directly inside the parent <ul>/<ol>.
Q4: What HTML is typically used to build navigation menus?
Answer: Navigation menus are typically built with an unordered list (<ul>) containing list items (<li>) with anchor tags (<a>) inside them. The <nav> semantic element wraps the whole thing. CSS then removes bullets and styles them horizontally or vertically.