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.

Practice

1. What HTML tag is used to create a numbered list?

easy

A. <ol>

B. <ul>

C. <li>

D. <list>

Solution

1. Step 1: Understand list types in HTML

   There are two main list types: ordered (<ol>) and unordered (<ul>).

2. Step 2: Identify the tag for numbered lists

   The <ol> tag creates numbered (ordered) lists, while <ul> creates bullet lists.

3. Final Answer:

   <ol> -> Option A

4. Quick Check:

   Numbered list tag = <ol> [OK]

Hint: Numbered lists always use <ol> tag [OK]

Common Mistakes:

• Confusing <ol> with <ul>
• Using <li> as the list container
• Trying to use a non-existent <list> tag

2. Which of the following is the correct syntax to start an ordered list in HTML?

easy

A. <orderedlist>

B. <list type='number'>

C. <ol>

D. <ul type='1'>

Solution

1. Step 1: Recall standard HTML tags for lists

   The standard tag for ordered lists is <ol>. Other tags like <orderedlist> or attributes on <ul> are not valid HTML.

2. Step 2: Confirm correct syntax

   The correct way to start an ordered list is simply <ol> without extra attributes or incorrect tag names.

3. Final Answer:

   <ol> -> Option C

4. Quick Check:

   Correct ordered list tag = <ol> [OK]

Hint: Ordered lists start with <ol>, no extra attributes needed [OK]

Common Mistakes:

• Using non-standard tags like <orderedlist>
• Adding type attribute to <ul> for numbers
• Confusing <ul> and <ol> tags

3. What will be the visual output of this HTML code?

<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

medium

A. A bulleted list with items: First, Second, Third

B. An error because <li> tags are not allowed inside <ol>

C. Plain text showing the tags and items

D. A numbered list with items: 1. First 2. Second 3. Third

Solution

1. Step 1: Understand the <ol> and <li> relationship

   The <ol> tag creates a numbered list, and each <li> is a list item.

2. Step 2: Predict the rendered output

   The browser will show a numbered list: 1. First, 2. Second, 3. Third.

3. Final Answer:

   A numbered list with items: 1. First 2. Second 3. Third -> Option D

4. Quick Check:

   Ordered list with
5. items = numbered list [OK]

Hint: Ordered lists show numbers before each <li> item [OK]

Common Mistakes:

• Thinking <ol> creates bullets instead of numbers
• Expecting raw HTML code to show on page
• Believing <li> tags are invalid inside <ol>

4. Identify the error in this HTML snippet:

<ol>
  <li>Step 1</li>
  <li>Step 2</li>
  <li>Step 3</ol>
</li>

medium

A. The closing </li> tag is misplaced after the closing </ol> tag

B. The <ol> tag should be <ul>

C. Missing <li> tags for each item

D. No errors, this is valid HTML

Solution

1. Step 1: Check tag nesting order

   Each <li> must open and close inside the <ol>. Here, the last </li> is after </ol>, which breaks proper nesting.

2. Step 2: Identify correct closing order

   The last list item should close before the ordered list closes. The misplaced closing tag causes invalid HTML.

3. Final Answer:

   The closing </li> tag is misplaced after the closing </ol> tag -> Option A

4. Quick Check:

   List items must close before the list closes [OK]

Hint: Close all <li> tags before closing <ol> [OK]

Common Mistakes:

• Closing <li> after
• Mixing <ul> and <ol> tags incorrectly
• Forgetting to close <li> tags

5. You want to start an ordered list at number 5 instead of 1. Which attribute should you add to the <ol> tag to do this?

hard

A. value="5"

B. start="5"

C. number="5"

D. count="5"

Solution

1. Step 1: Recall the attribute to set starting number

   The start attribute on <ol> sets the first number in the list.

2. Step 2: Confirm correct attribute usage

   Using start="5" will make the list begin numbering at 5.

3. Final Answer:

   start="5" -> Option B

4. Quick Check:

   Use start attribute to set list start number [OK]

Hint: Use start="number" on <ol> to begin numbering there [OK]

Common Mistakes:

• Using value or number attributes which don't exist on <ol>
• Trying to set start on <li> instead of <ol>
• Confusing with CSS counters