Ordered lists in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual output of this ordered list?

Look at this HTML code for an ordered list. What will you see in the browser?

HTML

<ol>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ol>

A A bulleted list with Apple, Banana, Cherry

B A numbered list with Apple as 1, Banana as 2, Cherry as 3

C A plain text list with Apple Banana Cherry separated by commas

D An error message because <ol> is not valid

💡 Hint

Think about what <ol> means in HTML.

The <ol> tag creates a numbered list. Each <li> is a list item with a number before it.

📝 Syntax

intermediate

Which option correctly starts an ordered list in HTML?

Choose the correct HTML tag to start an ordered list.

A <li>

B <list>

C <ol>

D <ul>

💡 Hint

Ordered lists use a tag starting with 'o'.

The <ol> tag is used to create ordered (numbered) lists. <ul> is for unordered (bulleted) lists.

❓ selector

advanced

Which CSS selector targets only list items inside ordered lists?

You want to style only the items inside ordered lists. Which CSS selector should you use?

A ol > li

B ol + li

C li

D ul li

💡 Hint

Think about selecting direct children of <ol>.

The selector 'ol > li' selects only <li> elements that are direct children of <ol>. 'ul li' selects list items inside unordered lists.

❓ layout

advanced

How to start an ordered list numbering at 5?

You want your ordered list to start numbering from 5 instead of 1. Which HTML attribute do you use?

HTML

<ol ???>
  <li>Item A</li>
  <li>Item B</li>
</ol>

A number="5"

B count="5"

C value="5"

D start="5"

💡 Hint

The attribute name is a common English word meaning 'begin'.

The 'start' attribute on <ol> sets the starting number for the list items.

❓ accessibility

expert

Which attribute improves accessibility for ordered lists?

To help screen readers understand your ordered list better, which attribute should you add?

HTML

<ol aria-??? >
  <li>Step one</li>
  <li>Step two</li>
</ol>

A aria-label="Steps to complete the task"

B aria-hidden="true"

C aria-disabled="true"

D aria-live="polite"

💡 Hint

This attribute gives a name or description to the list for screen readers.

The 'aria-label' attribute provides a descriptive label for the list, helping screen readers announce its purpose clearly.

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