← HTML & CSS

Ordered lists (ol and li)

An HTML element that creates an ordered (numbered) list. Each item must be wrapped in an <li> and the browser numbers them automatically.

Part of: HTML and CSS Journey — Module 19

What it does: The browser renders 1. Step one, 2. Step two. Inserting a new item renumbers everything automatically. Recipe steps must happen in order, so <ol> is the semantically correct choice over <ul>. <ol> creates an ordered (numbered) list. <ul> creates an unordered (bulleted) list. Each item must be wrapped in <li>...</li> - the same element used in unordered lists. There is no <step> element. The browser numbers <ol> items automatically. Typing numbers manually means they will not update when items are added or removed. HTML tag names must be lowercase. <OL> is non-standard - use <ol>. Direct children of <ol> must be <li> elements. Other content belongs inside the <li> wrappers.

Common mistakes: HTML tag names must be lowercase. <OL> should be written as <ol>. The first list item is missing its closing tag. It should be <li>Crack eggs</li> with </li> at the end.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a journey and assign it to your class.

🖨 Print Worksheet and Answer key of Ordered lists (ol and li) (PDF)

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

Which element creates a numbered list in HTML?

Matches

<ol> <li>First step<li> <li>Second step</li> </ol>

↓

The first <li> is missing its closing tag - it should be <li>First step</li>

Applying

Meanings

Term

<ol>

Meaning

An HTML element that creates an ordered (numbered) list. Each item must be wrapped in an <li> and the browser numbers them automatically.

Practice

<h2>Pancake steps</h2>

Testing

Gaps

Check Answer

Spots

1<OL>

2 <li>Preheat oven</li>

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Teach this with your class →

Quick Questions

1. Which element creates a numbered list in HTML?

A. <ol> ✓

B. <ul>

<ol> creates an ordered (numbered) list. <ul> creates an unordered (bulleted) list.

2. What element wraps each item inside an <ol>?

A. <li> ✓

B. <step>

Each item must be wrapped in <li>...</li> - the same element used in unordered lists. There is no <step> element.

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

A. When the order of items matters ✓

B. When you want bullet points

<ol> is for sequences where order matters: recipe steps, instructions, rankings. <ul> is for collections without sequence.

4. True or false: you must type the numbers 1, 2, 3 yourself inside each <li>.

A. False ✓

B. True

The browser numbers <ol> items automatically. Typing numbers manually means they will not update when items are added or removed.

5. True or false: <OL> with capital letters is valid HTML.

A. False ✓

B. True

HTML tag names must be lowercase. <OL> is non-standard - use <ol>.

Match the Pairs

<ol> <li>Mix flour</li> <li>Add eggs</li> </ol> → A numbered ordered list - the browser displays 1. Mix flour, 2. Add eggs automatically

<ol> <li>Bronze</li> <li>Silver</li> <li>Gold</li> </ol> → A ranking displayed as 1, 2, 3 - ordered lists are used when sequence or position matters

<ol> automatically numbers its items - the numbers update when items change → <ol> <li>Step one</li> <li>Step two</li> </ol>

Use <ol> when order matters and <ul> when it does not → <ol> <li>Preheat oven</li> <li>Bake cake</li> </ol>

<ol> <li>First step<li> <li>Second step</li> </ol> → The first <li> is missing its closing tag - it should be <li>First step</li>

<ol> <p>Step one</p> <li>Step two</li> </ol> → Direct children of <ol> must be <li>, not <p> - replace <p>Step one</p> with <li>Step one</li>

Key Term

<ol>

An HTML element that creates an ordered (numbered) list. Each item must be wrapped in an <li> and the browser numbers them automatically.

Fill in the Blanks

1. <ol> <li>Preheat oven</li> <li>Mix batter</li> </ol>

Hint: Type the element name that creates a numbered ordered list

2. <ol> <li>Crack eggs</li> <li>Whisk</li> </ol>

Hint: Type the element name used for each step in the list

3. <ol> <li>Wash hands</li> <li>Cook</li> </ol>

Hint: Type the element name for the closing tag of a list item

4. <ol> <li>Start</li> <li>Finish</li> </ol>

Hint: Type the element name for the closing tag that ends the ordered list

5. <h2>Steps</h2> <ol> <li>Mix</li> <li>Bake</li> </ol>

Hint: Type the element that numbers these recipe steps in sequence

Spot the Error

Question 1

A <OL>

B <li>Preheat oven</li>

C <li>Mix batter</li>

D </ol>

Line A — HTML tag names must be lowercase. <OL> should be written as <ol>.

Question 2

A <ol>

B <li>Crack eggs<li>

C <li>Whisk well</li>

D </ol>

Line B — The first list item is missing its closing tag. It should be <li>Crack eggs</li> with </li> at the end.

Question 3

A <ol>

B <li>Step one</li>

C <LI>Step two</LI>

D <li>Step three</li>

E </ol>

Line C — HTML tag names must be lowercase. <LI> and </LI> should be written as <li> and </li>.

Question 4

A <ol>

B <li>First</li>

C <li>Second</li>

D </ol>

E <li>Third</li>

Line D — The </ol> closing tag appears before the third list item, ending the list too early. Move </ol> after the last <li>.

Question 5

A <h2>Recipe steps</h2>

B <ol>

C <li>Preheat the oven</li>

D <li>Mix the ingredients</li>

E <p>Bake for 30 minutes</p>

F </ol>

Line E — Direct children of <ol> must be <li> elements, not <p> tags. Replace <p>Bake for 30 minutes</p> with <li>Bake for 30 minutes</li>.

For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?