List use cases in layout in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Common use cases for lists in web layouts

Which of the following is NOT a typical use case for lists (

,
,

) in web page layouts?

A Showing a series of steps in a process

B Creating a grid layout for images

C Listing features or benefits of a product

D Displaying a navigation menu with links

💡 Hint

Think about what lists are good for versus what layout tools like CSS Grid do.

Lists are great for grouping related items like menus, steps, or features. Grids are used for layout, not lists.

📝 Syntax

intermediate

Correct HTML list syntax for a navigation menu

Which option shows the correct HTML structure for a navigation menu using a list?

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

B <nav><ol><li>Home</li><li>About</li></ol></nav>

C <nav><dl><dt>Home</dt><dd>About</dd></dl></nav>

D <nav><list><item>Home</item><item>About</item></list></nav>

💡 Hint

Navigation menus usually use unordered lists with links inside list items.

Option A uses <ul> with <li> and <a> tags correctly for navigation.

❓ rendering

advanced

Visual result of nested lists in layout

What will the browser display for this HTML snippet?

HTML

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

A A bulleted list with 'Fruits' and 'Vegetables', where 'Fruits' has a nested bulleted list of 'Apple' and 'Banana'.

B A numbered list with 'Fruits' and 'Vegetables', and 'Fruits' has a nested numbered list of 'Apple' and 'Banana'.

C A paragraph with the text 'Fruits Apple Banana Vegetables' all in one line.

D An error message because nested lists are not allowed.

💡 Hint

Think about how nested unordered lists render by default.

Nested <ul> creates a sub-list with bullets inside the parent list item.

❓ selector

advanced

CSS selector to style only top-level list items

Which CSS selector will style only the top-level list items in a nested list layout?

A ul li ul li { color: blue; }

B ul li { color: blue; }

C ul > li { color: blue; }

D li ul { color: blue; }

💡 Hint

Use the child combinator to select direct children only.

The selector 'ul > li' targets only list items directly inside the first ul, not nested ones.

❓ accessibility

expert

Improving accessibility of list-based navigation

Which practice improves accessibility for a list-based navigation menu?

A Use <div> elements instead of lists and add tabindex="0" to each link.

B Use <ol> instead of <ul> for all navigation menus to indicate order.

C Remove all list tags and use only <span> elements with click handlers.

D Add role="navigation" to the container and use semantic <ul> with <li> and <a> elements.

💡 Hint

Semantic HTML and ARIA roles help screen readers understand navigation.

Using semantic lists with role="navigation" helps assistive technologies identify the menu properly.