Description Lists
Pair terms with descriptions using dl, dt, and dd.
Syntax
<dl><dt>Term</dt><dd>Definition</dd></dl>A description list is a list of terms with descriptions, like a glossary.
The three elements
<dl>— wraps the whole description list.<dt>— the term being described.<dd>— the description of the term.
Example
Loading editor…
Press Run to see the result.
When to use it
- A glossary page uses <dl> to list technical terms (<dt>) alongside their definitions (<dd>).
- A recipe card uses <dl> to pair ingredient names with their required amounts.
- A product specifications table is marked up with <dl> to pair attribute names and their values.
More examples
Basic description list for a glossary
<dt> defines a term and <dd> provides its description; the browser indents <dd> under each <dt>.
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language — the structure of web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets — controls visual presentation.</dd>
<dt>JavaScript</dt>
<dd>A scripting language that adds interactivity to web pages.</dd>
</dl>Product specs with description list
Description lists naturally map property-value pairs like product specifications without a table.
<dl>
<dt>Display</dt>
<dd>6.1 inches, OLED, 2532 x 1170</dd>
<dt>Battery</dt>
<dd>3227 mAh, up to 17 hours video</dd>
<dt>Storage</dt>
<dd>128 GB / 256 GB / 512 GB</dd>
</dl>Multiple definitions per term
A single <dt> can have multiple <dd> elements when a term has more than one definition or usage.
<dl>
<dt>Cache</dt>
<dd>A hardware or software component that stores data for faster future access.</dd>
<dd>In web dev: browser storage for assets to avoid re-downloading them.</dd>
</dl>
Discussion