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>