Description lists

Create term–description lists with <dl>, <dt> and <dd>.

What is a description list?

A description list pairs a term with its description. Dictionary entries, question–answer pairs or settings options are good examples. The structure is: inside the <dl> container, each term uses <dt> and each description uses <dd>.

Example: <dl><dt>Coffee</dt><dd>A hot drink</dd></dl>. The browser shows the description indented a bit from the term; that is the reason for this layout.

A dictionary entry example

A <dl> can hold several term–description pairs. For example a gym schedule:

<dl>
  <dt>Monday</dt>
  <dd>Chest and triceps</dd>
  <dt>Wednesday</dt>
  <dd>Back and biceps</dd>
</dl>

A term may have more than one description; or a description may apply to several terms. The browser still shows it correctly.

Exercise Write a dictionary entry

Add a <dl> description list to body. It should have at least one term (<dt>) and its description (<dd>); for example Coffee / A hot drink.

Show example solution

<body>
  <dl>
    <dt>Coffee</dt>
    <dd>A hot drink</dd>
  </dl>
</body>

Test yourself

In a description list, which tag wraps the term?
- <dd>
- <dt>
- <dl>
- <li>
Show answer

<dt> — Correct. The term is wrapped in <dt> (description term).
Match each tag to its role

<dl>

Description list container
<dt>

Term
<dd>

Description
<ul>

Unordered list container

Close the description

<dl>
  <dt>Coffee</dt>
  <dd>A hot drink____
</dl>

Show answer

<dl>
  <dt>Coffee</dt>
  <dd>A hot drink</dd>
</dl>

Next lesson: Nested lists

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies