Ordered lists in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple ordered list with three items.

HTML

<ol>[1]
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Drag options to blanks, or click blank then click option'

Astart="1"

Btype="a"

Ctype="1"

Dreversed

Attempts:

3 left

💡 Hint

Common Mistakes

Using start attribute instead of type for numbering style.

Using reversed which reverses the order instead of setting numbering style.

The type="1" attribute sets the list to use numbers (1, 2, 3...). This is the default for ordered lists.

2fill in blank

medium

Complete the code to start the ordered list numbering at 5.

HTML

<ol [1]>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ol>

Drag options to blanks, or click blank then click option'

Astart="5"

Btype="5"

Cvalue="5"

Dnumber="5"

Attempts:

3 left

💡 Hint

Common Mistakes

Using type attribute to set the start number.

Using value or number which are not valid for <ol>.

The start="5" attribute tells the browser to begin numbering the list at 5.

3fill in blank

hard

Fix the error in the code to correctly reverse the ordered list numbering.

HTML

<ol [1]>
  <li>Step one</li>
  <li>Step two</li>
  <li>Step three</li>
</ol>

Drag options to blanks, or click blank then click option'

Areversed

Breverse="true"

Creverse

Dreversed="true"

Attempts:

3 left

💡 Hint

Common Mistakes

Using reverse instead of reversed.

Adding a value like "true" which is not needed.

The correct attribute to reverse the numbering in an ordered list is reversed without a value.

4fill in blank

hard

Fill both blanks to create an ordered list that uses uppercase letters and starts at letter C.

HTML

<ol [1] [2]>
  <li>Option one</li>
  <li>Option two</li>
  <li>Option three</li>
</ol>

Drag options to blanks, or click blank then click option'

Atype="A"

Bstart="C"

Cstart="3"

Dtype="1"

Attempts:

3 left

💡 Hint

Common Mistakes

Using letters like "C" in start; use the numeric position 3 instead.

Mixing lowercase and uppercase letters in type.

Use type="A" for uppercase letters and start="3" to start at letter C.

5fill in blank

hard

Fill all three blanks to create a reversed ordered list starting at 10 with lowercase Roman numerals.

HTML

<ol [1] [2] [3]>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

Drag options to blanks, or click blank then click option'

Areversed

Bstart="10"

Ctype="i"

Dtype="I"

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase Roman numerals type="I" instead of lowercase.

Omitting the reversed attribute.

Use reversed to reverse the list, start="10" to start at 10, and type="i" for lowercase Roman numerals.