📋 Phase 4 · Lists 🟢 Beginner MODULE 10

Ordered Lists

⏱️ 14 min read

📖 Theory + Code

🧩 5 Quiz Questions

🏗️ 1 Challenge

Course progress29%

🎯 What you'll learn: When to reach for an ordered list instead of an unordered one, how <ol> and <li> work together, and how to control numbering with start, reversed, and type.

Section 1

Why Order Matters

An ordered list (<ol>) is for content where sequence carries meaning — steps in a recipe, ranking in a leaderboard, or numbered instructions. If you shuffled the items, the content would stop making sense. That's the test: if reordering breaks the meaning, use <ol>. If not, use <ul> (next lesson).

ol-basic.html

HTML

<ol>
  <li>Preheat the oven to 200°C</li>
  <li>Mix flour, sugar, and eggs</li>
  <li>Pour into a greased tin</li>
  <li>Bake for 35 minutes</li>
</ol>

Preheat the oven to 200°C
Mix flour, sugar, and eggs
Pour into a greased tin
Bake for 35 minutes

💡

Browsers number automatically

You never write the numbers yourself — the browser counts <li> children and numbers them 1, 2, 3… If you insert or remove a step later, every number after it updates automatically.

Section 2

Controlling the Start Number

The start attribute sets the first number in the sequence. This is useful for "continued" lists — like a recipe that resumes after an image, or step 6 of a longer guide shown on its own page.

ol-start.html

HTML

<!-- Continues numbering from step 5 -->
<ol start="5">
  <li>Let the cake cool for 10 minutes</li>
  <li>Remove from the tin</li>
  <li>Add icing once fully cool</li>
</ol>
<!-- Renders as: 5. 6. 7. -->

The reversed attribute counts down instead of up — great for countdowns and "Top 10" style rankings where item 1 should appear last.

ol-reversed.html

HTML

<ol reversed>
  <li>Third place</li>
  <li>Second place</li>
  <li>First place</li>
</ol>
<!-- Renders as: 3. 2. 1. -->

Section 3

Numbering Types — Letters & Roman Numerals

The type attribute changes how numbers are displayed — the underlying count is still numeric, only the visual marker changes. Useful for legal documents, formal outlines, and sub-lists that need visual distinction from their parent.

Value	Renders as	Common use
`type="1"`	1, 2, 3…	Default — standard numbering
`type="A"`	A, B, C…	Formal outlines, answer options
`type="a"`	a, b, c…	Sub-points inside a numbered step
`type="I"`	I, II, III…	Legal documents, formal chapters
`type="i"`	i, ii, iii…	Front-matter pages (preface, foreword)

ol-type.html

HTML

<ol type="A">
  <li>Paris</li>
  <li>London</li>
  <li>Tokyo</li>
</ol>
<!-- Renders as: A. B. C. -->

⚠️

type ≠ CSS list-style-type

The HTML type attribute is an older, still-valid way to set the marker. In modern projects, prefer the CSS property list-style-type for styling and reserve the HTML attribute for cases where the marker is semantically part of the content (like legal clause lettering).

Section 4

Custom Numbers Per Item — the value Attribute

Individual <li> elements can override their own number with value. Every item after it continues counting from that new value — handy for lists with intentional gaps, like sports results with disqualified entries.

li-value.html

HTML

<ol>
  <li>Amina — Gold</li>
  <li>Yusuf — Silver</li>
  <li value="5">Zainab — Bronze (2 disqualified)</li>
  <li>Omar — 6th</li>
</ol>
<!-- Renders as: 1. 2. 5. 6. -->

🧩 Knowledge Check — Lesson 10

5 questions to test your ordered list knowledge. Instant feedback on every answer.

1. When should you choose <ol> over <ul>?

2. What does the reversed attribute do?

3. Which attribute renders list items as A, B, C instead of 1, 2, 3?

4. Where do you put start="5" to make a list begin counting at 5?

5. What happens if one <li> has value="5" in the middle of a list?

💪

Coding Challenge — Lesson 10

Apply what you learned · Beginner Level

Challenge: Build a Recipe with a Podium

Write two ordered lists:

1. A recipe with 5 steps in a plain <ol> — normal 1, 2, 3, 4, 5 numbering.
2. A "Top 3 Bakers" podium list using reversed so 3rd place is listed first but displays as "3.", ending with 1st place displaying as "1."

Bonus: Add a third list using type="I" for a 3-item "Table of Contents" showing chapters in Roman numerals.

💡 Show hints if you're stuck

Plain recipe: <ol><li>...</li></ol> with 5 <li> items
Podium: <ol reversed> then list 3rd, 2nd, 1st place in that source order
Roman numerals: <ol type="I">

Finished this lesson?

Mark it complete to track your progress.

Module 10 of 62Phase 4 — Lists

Ordered Lists

Why Order Matters

Controlling the Start Number

Numbering Types — Letters & Roman Numerals

Custom Numbers Per Item — the value Attribute

Lesson 10 Complete!