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.