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.