Test your knowledge: HTML Lists

A short assessment covering unordered, ordered, and description lists, nesting, and list markup for navigation.

Stuck? Each question has an optional hint.

Skip a hard question and review it before your results.

Questions and answer options can shuffle between attempts.

You can retake this quiz whenever you like.

Question 1 of 5

A page shows ten search results in ranked order. Which list element fits, and why?

Ask whether shuffling the items would change the message.

Answer options A <ul>, because search results are never numbered on screen. B <ol>, because rank is part of the meaning of each result. C <dl>, because each result pairs a title with a description. D Whichever element the stylesheet finds easiest to theme.

Ranked results carry their position as meaning, so an ordered list is the honest element, even when CSS later replaces the numbers with rankings or cards. The question is semantics, not the default appearance.

Review this lesson

Question 2 of 5

Where must a nested `<ul>` be placed to build a valid two-level menu?

The nested list belongs to one item, not to the list as a whole.

Answer options A Directly inside the parent <ul>, between two <li> elements. B Inside the <li> of the item it belongs to. C Immediately after the parent list, sharing its container. D Inside the parent list's closing </ul> tag.

A nested list must live inside the li of the parent item it descends from. Placing it directly inside the parent ul is invalid markup that screen readers cannot announce as a new level.

Review this lesson

Question 3 of 5

A glossary pairs each term with its definition. Which markup says exactly that?

One HTML construct exists specifically for term-and-meaning pairs.

Answer options A A table with two columns, Term and Definition. B An unordered list where each <li> contains the term followed by a dash and the definition. C <dl> containing <dt> terms and <dd> descriptions. D Headings for terms with paragraphs for definitions.

The description list is purpose-built for terms and their descriptions, and browsers and assistive technology announce that relationship. Tables and dashes can imitate the look but not the meaning.

Review this lesson

Question 4 of 5

Why is site navigation still marked up as a `<ul>` when its bullets are removed by CSS?

What does the markup still say once the visual decoration is gone?

Answer options A Removing the CSS restores the bullets, keeping a fallback. B Assistive technology announces it as a list with a count of items, which aids navigation. C Bulleted markup validates even when invisible. D It is a legacy habit; a group of <div> elements works identically.

The list announces itself as a group with a specific number of items, letting screen reader users skip the whole menu in one command. Restyling is presentation; the structure underneath is meaning that divs cannot carry.

Review this lesson

Question 5 of 5

Several lines separated by `<br>` are announced by a screen reader as what?

Which element actually contains those lines?

Answer options A A list with a count of items. B A table with one column. C One paragraph of continuous text. D Separate regions, one per line.

Line breaks inside one paragraph produce one long run of text for assistive technology. The visual list exists only on screen, so the grouping has to be guessed rather than announced.

Review this lesson

Test your knowledge: HTML Lists