HTML Description Lists: dl, dt and dd

A description list pairs a term with its description. It is perfect for glossaries, product details and any “label: value” information.

1
2
3
4
5
6
7

<dl>
  <dt>Paperback</dt>
  <dd>A book with a flexible paper cover.</dd>

  <dt>Hardback</dt>
  <dd>A book with a rigid cover, usually more durable and more expensive.</dd>
</dl>

• dl is the list.
• dt is the term, the thing being described.
• dd is the description.

More than one description

A term can have several descriptions, and several terms can share one.

1
2
3
4
5
6
7
8
9

<dl>
  <dt>Format</dt>
  <dd>Paperback</dd>
  <dd>Audiobook</dd>

  <dt>Author</dt>
  <dt>Illustrator</dt>
  <dd>Mina Okafor</dd>
</dl>

Where they are useful

• Glossaries and definitions.
• Product facts such as size, weight and colour.
• Frequently asked questions, when the question is the term and the answer is the description.