<dl> Description list
Pairs of terms and descriptions, such as a glossary or a set of key-value data.
A <dl> contains terms (<dt>) paired with descriptions (<dd>). Glossaries fit it well, and so do FAQs, product specs and metadata such as author and date.
A term may have more than one description, and several terms may share one. Each group can be wrapped in a <div> for styling. Using dl only to indent text is wrong.
The dl element definition (opens in a new tab) includes example glossaries, metadata and lists of questions. Its two parts are the dt and dd elements.
Syntax
<dl>
<dt>Term</dt>
<dd>Description</dd>
</dl>When to use it
Think of the details block on an order page: order number, date, total. People scan that kind of name-value group, and <dl> was made for it. Product specs, contact details, a short glossary at the end of an article and the cast list of a play work the same way. With two columns and no column headings, a dl is lighter than a table.
Comparing several things across the same properties is table territory, for example three phones by price, weight and battery life, so use a table there. A long FAQ with multi-paragraph answers is easier to navigate as headings and sections than as one huge dl.
The standard lets you wrap each group of dt and dd in a div. Nothing else may go between them, not a heading, not even a span, and validators will flag a heading placed straight inside the dl. Need titles for groups? Use the dt itself, or wrap the groups in divs and style those.
Live example
Edit the code and watch the preview.
<dl>
<dt>HTML</dt>
<dd>The language for page structure.</dd>
<dt>CSS</dt>
<dd>The language for page style.</dd>
</dl>More examples
Order summary
Every name-value pair has its own div, which the standard allows. Inline blocks in the CSS put each label and its value on one line. The result is a neat summary with no table.
<style>
.summary dt{display:inline-block;width:8em;font-weight:bold}
.summary dd{display:inline-block;margin:0}
</style>
<dl class="summary">
<div><dt>Order</dt><dd>#10482</dd></div>
<div><dt>Date</dt><dd><time datetime="2026-05-14">14 May 2026</time></dd></div>
<div><dt>Total</dt><dd>$42.50</dd></div>
<div><dt>Status</dt><dd>Shipped</dd></div>
</dl>Two spellings, one definition
Put two dt elements in a row and they share the dd that follows. A glossary can list both spellings of a word, or several names for one thing, and write the definition once.
<dl>
<dt>Colour</dt>
<dt>Color</dt>
<dd>The property of an object that comes from the light it reflects.</dd>
<dt>Grey</dt>
<dt>Gray</dt>
<dd>A color between black and white.</dd>
</dl>Tip: dl is for name-value pairs. Indent with CSS.
Browser support
Every browser handles dl, dt and dd. HTML 4 did not allow a div around each group; the HTML Living Standard does, and browsers have always rendered it fine. Screen readers vary. Some announce a list with an item count, and others read the text as it comes.
Accessibility
Screen readers handle description lists inconsistently. Write each dt so the dd after it makes sense even if the list semantics get lost. Description lists are covered in the W3C tutorial on content structure (opens in a new tab).
Common mistakes
Wrong
<dl>
<dd>HTML</dd>
<dt>Markup language for web pages</dt>
</dl>Right
<dl>
<dt>HTML</dt>
<dd>Markup language for web pages</dd>
</dl>The term goes in dt, first; its description follows in dd.
Frequently asked questions
When should I use a dl description list?
Reach for <dl> whenever you have name-value pairs. Typical cases are a glossary, a product spec sheet, metadata like Author and Published date, and a set of questions with answers. Names go in <dt>, values in <dd>. One term may carry several values, and several terms may point to one value. The classic case is the glossary (opens in a new tab), which Wikipedia describes in detail.
Can I wrap dt and dd in a div?
Yes. The HTML Living Standard lets you wrap each group of <dt> and <dd> elements in a <div> placed directly inside the <dl>. Styling each pair as a row or a card gets much easier. Wrapped and unwrapped groups cannot be mixed in one list.