Ordered lists (ol and li)

Tip: Choose Save as PDF in the print dialog to download. Use A4 paper size.

Ordered lists (ol and li)

Name:
Date:
Class:
A

Quick Questions

Shade in the A or B circle for each question.

1. Which element creates a numbered list in HTML?
A <ul>
B <ol>
2. What element wraps each item inside an <ol>?
A <step>
B <li>
3. When should you choose <ol> over <ul>?
A When the order of items matters
B When you want bullet points
4. True or false: you must type the numbers 1, 2, 3 yourself inside each <li>.
A False
B True
5. True or false: <OL> with capital letters is valid HTML.
A False
B True
B

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left columnRight column
1<ol> <li>Mix flour</li> <li>Add eggs</li> </ol> ADirect children of <ol> must be <li>, not <p> - replace <p>Step one</p> with <li>Step one</li>
2<ol> <li>Bronze</li> <li>Silver</li> <li>Gold</li> </ol> B<ol> <li>Preheat oven</li> <li>Bake cake</li> </ol>
3<ol> automatically numbers its items - the numbers update when items change C<ol> <li>Step one</li> <li>Step two</li> </ol>
4Use <ol> when order matters and <ul> when it does not DThe first <li> is missing its closing tag - it should be <li>First step</li>
5<ol> <li>First step<li> <li>Second step</li> </ol> EA ranking displayed as 1, 2, 3 - ordered lists are used when sequence or position matters
6<ol> <p>Step one</p> <li>Step two</li> </ol> FA numbered ordered list - the browser displays 1. Mix flour, 2. Add eggs automatically
C

Definitions

<ol>
D

Fill in the Blanks

Complete each line of code by filling in the missing parts.

1.
<___> <li>Preheat oven</li> <li>Mix batter</li> </ol>
2.
<ol> <___>Crack eggs</li> <li>Whisk</li> </ol>
3.
<ol> <li>Wash hands</___> <li>Cook</li> </ol>
4.
<ol> <li>Start</li> <li>Finish</li> </___>
5.
<h2>Steps</h2> <___> <li>Mix</li> <li>Bake</li> </ol>
E

Spot the Error

Shade in the letter of the line that contains an error.

Question 1
A <OL>
B <li>Preheat oven</li>
C <li>Mix batter</li>
D </ol>
Question 2
A <ol>
B <li>Crack eggs<li>
C <li>Whisk well</li>
D </ol>
Question 3
A <ol>
B <li>Step one</li>
C <LI>Step two</LI>
D <li>Step three</li>
E </ol>
Question 4
A <ol>
B <li>First</li>
C <li>Second</li>
D </ol>
E <li>Third</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>

Answer Key

Ordered lists (ol and li)
Section A: Quick Questions
Q1
B — <ol>
Q2
B — <li>
Q3
A — When the order of items matters
Q4
A — False
Q5
A — False
Section B: Match the Pairs
Q1
<ol> <li>Mix flour</li> <li>Add eggs</li> </ol> → A numbered ordered list - the browser displays 1. Mix flour, 2. Add eggs automatically
Q2
<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
Q3
<ol> automatically numbers its items - the numbers update when items change → <ol> <li>Step one</li> <li>Step two</li> </ol>
Q4
Use <ol> when order matters and <ul> when it does not → <ol> <li>Preheat oven</li> <li>Bake cake</li> </ol>
Q5
<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>
Q6
<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>
Section C: Definitions
Q1
<ol> — An HTML element that creates an ordered (numbered) list. Each item must be wrapped in an <li> and the browser numbers them automatically.
Section D: Fill in the Blanks
Q1
<ol> <li>Preheat oven</li> <li>Mix batter</li> </ol>
Q2
<ol> <li>Crack eggs</li> <li>Whisk</li> </ol>
Q3
<ol> <li>Wash hands</li> <li>Cook</li> </ol>
Q4
<ol> <li>Start</li> <li>Finish</li> </ol>
Q5
<h2>Steps</h2> <ol> <li>Mix</li> <li>Bake</li> </ol>
Section E: Spot the Error
Q1
A — HTML tag names must be lowercase. <OL> should be written as <ol>.
Q2
B — The first list item is missing its closing tag. It should be <li>Crack eggs</li> with </li> at the end.
Q3
C — HTML tag names must be lowercase. <LI> and </LI> should be written as <li> and </li>.
Q4
D — The </ol> closing tag appears before the third list item, ending the list too early. Move </ol> after the last <li>.
Q5
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>.