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.

Practice

1. What is the main purpose of the <dl> element in HTML?

easy

A. To add a paragraph of text

B. To create a numbered list of items

C. To create a table with rows and columns

D. To create a description list that pairs terms with their descriptions

Solution

1. Step 1: Understand the role of <dl>

   The <dl> tag is used to group terms and their descriptions in a list format.

2. Step 2: Compare with other list types

   Unlike ordered (<ol>) or unordered (<ul>) lists, <dl> is specifically for description lists.

3. Final Answer:

   To create a description list that pairs terms with their descriptions -> Option D

4. Quick Check:

   Description list = <dl> [OK]

Hint: Remember: dl = description list, dt = term, dd = description [OK]

Common Mistakes:

• Confusing <dl> with <ul> or <ol>
• Thinking <dl> creates tables
• Using <dl> for paragraphs

2. Which of the following is the correct syntax to start a description list in HTML?

easy

A. <dl>

B. <dt>

C. <dd>

D. <list>

Solution

1. Step 1: Identify the container tag for description lists

   The <dl> tag is the container that starts a description list.

2. Step 2: Understand roles of <dt> and <dd>

   <dt> defines a term, and <dd> defines its description, but they do not start the list.

3. Final Answer:

   <dl> -> Option A

4. Quick Check:

   Start description list = <dl> [OK]

Hint: Description lists always start with <dl> tag [OK]

Common Mistakes:

• Using <dt> or <dd> as the list container
• Using non-existent <list> tag
• Confusing with unordered list tags

3. What will the following HTML code display in a browser?

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

medium

A. A numbered list with descriptions

B. A bulleted list with HTML and CSS as items

C. A list showing 'HTML' with 'HyperText Markup Language' below it, then 'CSS' with 'Cascading Style Sheets' below it

D. Plain text without any list formatting

Solution

1. Step 1: Understand the structure of the description list

   The <dl> contains pairs of <dt> (terms) and <dd> (descriptions).

2. Step 2: Visualize the browser rendering

   Each term appears on its own line, with its description indented below it, forming a clear term-description pair.

3. Final Answer:

   A list showing 'HTML' with 'HyperText Markup Language' below it, then 'CSS' with 'Cascading Style Sheets' below it -> Option C

4. Quick Check:

   dl shows terms with indented descriptions [OK]

Hint: dt = term, dd = description shown indented below [OK]

Common Mistakes:

• Thinking it creates bulleted or numbered lists
• Expecting terms and descriptions on the same line
• Ignoring indentation of descriptions

4. Identify the error in this description list code:

<dl>
  <dt>JavaScript</dt>
  <dt>A programming language</dt>
</dl>

medium

A. Missing closing </dl> tag

B. Using two <dt> tags without a <dd> for description

C. Using <dd> instead of <dt> for term

D. No error, code is correct

Solution

1. Step 1: Check tag usage in description lists

   <dt> is for terms, <dd> is for descriptions. Terms should be followed by descriptions.

2. Step 2: Identify the problem in the code

   The code uses two <dt> tags in a row without a <dd> describing the first term.

3. Final Answer:

   Using two <dt> tags without a <dd> for description -> Option B

4. Quick Check:

   Term must have description after it [OK]

Hint: Each <dt> term needs a following <dd> description [OK]

Common Mistakes:

• Using multiple <dt> tags without <dd>
• Confusing <dt> and <dd> roles
• Forgetting to close <dl>

5. You want to create a description list where some terms have multiple descriptions. Which is the correct way to write it?

hard

A.
Fruit
Apple
Banana
Vegetable
Carrot

B.
Fruit
Apple
Banana
Vegetable
Carrot

C.
Fruit
Apple
Banana
Vegetable
Carrot

D.
Fruit
Apple
Banana
Vegetable
Carrot

Solution

1. Step 1: Understand multiple descriptions for one term

   A term (<dt>) can have multiple descriptions (<dd>) listed below it.

2. Step 2: Analyze each option's structure

   Fruit

   Apple

   Banana

   Vegetable

   Carrot

   correctly groups multiple <dd> tags under one <dt> term. Other options misuse tags or mix terms and descriptions incorrectly.

3. Final Answer:

   Option A shows correct multiple descriptions for one term -> Option A

4. Quick Check:

   Multiple
   under one
   is valid [OK]

Hint: Use multiple <dd> tags after one <dt> for several descriptions [OK]

Common Mistakes:

• Using multiple <dt> tags for descriptions
• Placing <dd> before <dt>
• Using only <dd> without <dt>