Unordered lists in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual output of this unordered list?

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

HTML

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

A A numbered list with 1. Apple, 2. Banana, 3. Cherry

B A bulleted list with Apple, Banana, Cherry each on its own line

C A paragraph with Apple Banana Cherry all in one line

D No visible output because ul tag is empty

💡 Hint

Remember, <ul> creates a bulleted list and <li> defines each item.

The <ul> tag creates a bulleted list. Each <li> inside it becomes a bullet point on its own line.

❓ selector

intermediate

Which CSS selector targets all items in an unordered list?

You want to style all list items inside any unordered list. Which CSS selector should you use?

A li > ul

B li ul

C ul > ul

D ul li

💡 Hint

Think about selecting list items inside unordered lists, not the other way around.

The selector 'ul li' means all <li> elements inside any <ul>. This targets all list items in unordered lists.

🧠 Conceptual

advanced

What is the default marker style for an unordered list in HTML?

When you create an unordered list without any CSS, what kind of bullet marker appears by default?

A Solid circle bullet

B Square bullet

C No marker, just text

D Numbered decimal

💡 Hint

Think about the common bullet style you see in browsers by default.

By default, browsers show unordered list items with a solid circle bullet marker.

❓ layout

advanced

How to remove bullets and indent from an unordered list using CSS?

You want an unordered list with no bullet points and no indentation. Which CSS rules achieve this?

A ul { bullet-style: none; indent: 0; }

B ul { list-style: none; padding: 0; }

C ul { list-style-type: none; padding-left: 0; margin-left: 0; }

D ul { marker: none; margin: 0; }

💡 Hint

The property to remove bullets is list-style-type, and indentation is controlled by padding or margin.

Setting list-style-type to none removes bullets. Padding-left and margin-left set to zero remove indentation.

❓ accessibility

expert

Which attribute improves accessibility for an unordered list used as a navigation menu?

You have an unordered list used as a navigation menu. Which attribute should you add to improve screen reader accessibility?

HTML

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

A Add aria-label="Main navigation" to the &lt;nav&gt; element

B Add tabindex="0" to each &lt;li&gt; element

C Add alt="navigation" to each &lt;a&gt; element

D Add role="menubar" to the &lt;ul&gt; element

💡 Hint

Think about labeling the navigation region for screen readers.

Adding aria-label to the <nav> element helps screen readers understand the purpose of the navigation region.

Practice

1. What HTML tag is used to create an unordered list?

easy

A. <li>

B. <ol>

C. <ul>

D. <list>

Solution

1. Step 1: Understand list types in HTML

   <ul> creates unordered lists with bullet points, while <ol> creates ordered lists with numbers.

2. Step 2: Identify the correct tag for unordered lists

   The tag <ul> is specifically for unordered lists.

3. Final Answer:

   <ul> -> Option C

4. Quick Check:

   Unordered list tag = <ul> [OK]

Hint: Unordered lists always start with <ul> tag [OK]

Common Mistakes:

• Confusing <ul> with <ol>
• Using <li> as the list container
• Using non-standard tags like <list>

2. Which of the following is the correct syntax to create a list item inside an unordered list?

easy

A. Item

B. Item

C. Item

D. Item

Solution

1. Step 1: Identify the correct tag for list items

   List items must be inside <li> tags.

2. Step 2: Check the correct nesting of tags

   The <li> tags go inside the <ul> tags, not the other way around.

3. Final Answer:

   <ul><li>Item</li></ul> -> Option B

4. Quick Check:

   List item inside <ul> uses
5. [OK]

Hint: List items always go inside <li> tags within <ul> [OK]

Common Mistakes:

• Swapping <ul> and <li> tags
• Using <item> instead of <li>
• Using non-standard <list> tag

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

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

medium

A. A bulleted list with Apple, Banana, Cherry

B. An error message because of missing tags

C. Plain text: Apple Banana Cherry without bullets or numbers

D. A numbered list with Apple, Banana, Cherry

Solution

1. Step 1: Recognize the list type from the tag

   The <ul> tag creates an unordered list which shows bullet points.

2. Step 2: Understand the list items

   Each <li> creates a bullet point with the text inside it.

3. Final Answer:

   A bulleted list with Apple, Banana, Cherry -> Option A

4. Quick Check:

   <ul> = bulleted list [OK]

Hint: Unordered lists show bullets, ordered lists show numbers [OK]

Common Mistakes:

• Confusing <ul> with <ol>
• Expecting numbers instead of bullets
• Thinking it shows plain text without bullets

4. Identify the error in this unordered list code:

<ul>
  <li>First</li>
  <li>Second
</ul>

medium

A. No error, code is correct

B. Using <ul> instead of <ol>

C. Extra closing tag for <ul>

D. Missing closing tag for the second <li>

Solution

1. Step 1: Check each list item tag

   The first <li> has a closing tag, but the second <li> does not.

2. Step 2: Confirm proper HTML structure

   Every <li> must have a closing </li> tag to be valid.

3. Final Answer:

   Missing closing tag for the second <li> -> Option D

4. Quick Check:

   All
5. tags must be closed [OK]

Hint: Every

needs a closing

tag [OK]

Common Mistakes:

• Forgetting to close <li> tags
• Confusing <ul> with <ol>
• Ignoring missing closing tags

5. You want to create a nested unordered list where 'Fruits' has sub-items 'Apple' and 'Banana'. Which code correctly achieves this?

hard

A. FruitsAppleBanana

B. FruitsAppleBanana

C. FruitsAppleBanana

D. FruitsAppleBanana

Solution

1. Step 1: Understand nested list structure

   Nested lists must be inside a list item <li> of the parent list.

2. Step 2: Check correct nesting in options

   • Fruits
     • Apple
     • Banana
   correctly nests a <ul> inside the <li> for 'Fruits'. Other options either miss closing tags or place nested lists incorrectly.

3. Final Answer:

   <ul><li>Fruits<ul><li>Apple</li><li>Banana</li></ul></li></ul> -> Option A

4. Quick Check:

   Nested
   inside
   • for sublist [OK]

Hint: Put nested <ul> inside a parent <li> tag [OK]

Common Mistakes:

• Placing nested <ul> outside <li>
• Missing closing tags in nested lists
• Using multiple <li> without nesting