Description lists in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual output of this description list?

Look at the HTML code below. What will the browser show visually?

HTML

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

A A list with bold terms 'HTML' and 'CSS' each followed by their descriptions indented below.

B A bulleted list with items 'HTML' and 'CSS' only.

C A numbered list with 'HTML' and 'CSS' as items.

D Plain text with no special formatting or indentation.

💡 Hint

Description lists show terms and their descriptions with indentation.

The

tag creates a description list. Inside,

defines terms, shown bold by default, and

defines descriptions, indented below each term.

📝 Syntax

intermediate

Which option fixes the invalid description list syntax?

This code has a mistake. Which option corrects it so the description list is valid?

HTML

<dl>
  <dt>JavaScript
  <dd>A programming language
  <dt>Python</dt>
  <dd>A scripting language</dd>
</dl>

A

<dl>
  <dt>JavaScript</dt>
  <dd>A programming language</dd>
  <dt>Python</dt>
  <dd>A scripting language</dd>
</dl>

B

<dl>
  <dt>JavaScript</dt>
  <dd>A programming language</dd>
  <dd>Python</dd>
  <dd>A scripting language</dd>
</dl>

C

<dl>
  <dt>JavaScript
  <dd>A programming language</dd>
  <dt>Python</dt>
  <dd>A scripting language</dd>
</dl>

D

<dl>
  <dt>JavaScript</dt>
  <dd>A programming language
  <dt>Python</dt>
  <dd>A scripting language</dd>
</dl>

💡 Hint

Each

and

must be properly closed with matching tags.

In HTML, every

and

must have opening and closing tags. Option A fixes the missing closing tags for the first

and

.

❓ selector

advanced

Which CSS selector targets only the description terms in a description list?

You want to style only the terms (not descriptions) inside a

. Which CSS selector should you use?

A dl dt dd

B dl > dt

C dl > dd

D dl dt + dd

💡 Hint

Terms are inside

tags directly under

.

The selector 'dl > dt' selects all

elements that are direct children of

, which are the description terms.

❓ layout

advanced

How to align description terms and descriptions side by side?

You want the terms on the left and their descriptions on the right in one row each. Which CSS layout approach works best?

A Use display:inline on both <dt> and <dd>.

B Use float:left on <dt> and float:right on <dd>.

C Use CSS Grid on <dl> with two columns: one for <dt>, one for <dd>.

D Use position:absolute on <dt> and relative on <dd>.

💡 Hint

Modern CSS layout methods like Grid help align items in columns.

CSS Grid can create two columns inside

, placing

in the first and

in the second column, aligning them side by side cleanly.

❓ accessibility

expert

What is the best ARIA role to improve accessibility for a description list?

To help screen readers understand a description list, which ARIA role should you add to the

element?

A role="list"

B role="listitem"

C role="definition"

D role="list" is not recommended; use native <dl> without ARIA roles.

💡 Hint

Native HTML elements often have built-in accessibility.

The

element is natively recognized by screen readers as a description list. Adding ARIA roles like 'list' can confuse assistive tech. It's best to rely on native semantics.