HTML & CSS reference

<dl>

A description list: terms `<dt>` and their descriptions `<dd>`.

Syntax

<dl>
  <dt>Term</dt>
  <dd>Description</dd>
</dl>

Examples

A small glossary of coffee terms:

<dl>
  <dt>Espresso</dt>
  <dd>Strong coffee made under pressure.</dd>
  <dt>Latte</dt>
  <dd>Espresso with a lot of steamed milk.</dd>
</dl>

Product details in two columns:

<style>
  dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
  dt { font-weight: bold; }
  dd { margin: 0; }
</style>
 
<dl>
  <dt>Weight</dt><dd>250 g</dd>
  <dt>Roast</dt><dd>Medium</dd>
  <dt>Origin</dt><dd>Brazil</dd>
</dl>

Notes

One term may have several <dd> elements and vice versa. It suits not only glossaries but any name–value pairs: specifications, metadata, FAQs.

See also

<ul> — A bulleted list: items whose order does not matter.
<abbr> — An abbreviation or acronym with its full form.

In the tutorial

Lists — Bulleted and numbered lists, numbering options, nested lists and description lists in HTML.