<dd> Description details
The definition, description or value that belongs to a term in a dl.
<dd> holds the description or value for the <dt> directly before it in a <dl>. Browsers indent it by default.
Paragraphs, lists and other block content can all go inside. A word with two meanings gets two dd elements under one term.
The places where it may appear are listed in the dd element definition (opens in a new tab). It is always paired with a dt term.
Syntax
<dl>
<dt>Term</dt>
<dd>Description</dd>
</dl>When to use it
The price in a spec list, the answer in a short FAQ, the meaning of a glossary word, the ingredients of one dish on a restaurant menu: each of these is a <dd>, the value or explanation that goes with a term. A dd can hold block content, so an answer can contain paragraphs, a nested list or links.
Early HTML5 drafts allowed dd inside figure and details too, and much older pages used it to indent text. Both are invalid today. A dd belongs in a dl, directly or inside a div group. Indent text with the CSS margin-left property, and put quotes in a blockquote.
It is tempting to cram several values into one dd with commas, two authors for example. If they are separate items, give each one its own dd. Screen readers that announce list items will count them correctly, and you can style or reorder each value on its own.
Live example
Edit the code and watch the preview.
<dl>
<dt>Bank</dt>
<dd>A place that keeps money.</dd>
<dd>The side of a river.</dd>
</dl>More examples
Recipe card
A whole list can live inside a dd. The Ingredients term gets a bulleted list, while Time and Serves get short text values, and it all stays in one description list.
<h3>Pancakes</h3>
<dl>
<dt>Ingredients</dt>
<dd>
<ul>
<li>200 g flour</li>
<li>300 ml milk</li>
<li>2 eggs</li>
</ul>
</dd>
<dt>Time</dt>
<dd>20 minutes</dd>
<dt>Serves</dt>
<dd>4 people</dd>
</dl>One value per dd
In these book details, two terms have several values each. Every author and every format gets a dd of its own, not one comma-separated line. The markup now matches the data, and you can style any value separately.
<dl>
<dt>Authors</dt>
<dd>Ana Lopez</dd>
<dd>Ben Okafor</dd>
<dt>Formats</dt>
<dd>Paperback</dd>
<dd>E-book</dd>
<dd>Audiobook</dd>
</dl>Tip: Two meanings? Give the term two dd elements.
Browser support
dd works in every browser, and each one gives it a default start margin of 40 pixels. The margin follows the writing direction. In Arabic, Hebrew and other right-to-left languages the indent moves to the right side on its own.
Accessibility
Some screen readers read dd items without announcing the list structure, so each dd should make sense next to its term. The W3C note Understanding Info and Relationships (opens in a new tab) explains why the structure still has to be there.
Common mistakes
Wrong
<dd>Indented text</dd>Right
<p class="indent">Indented text</p>dd belongs in a description list only. Indent with CSS instead.
Frequently asked questions
How do I remove the indent from dd?
Browsers give <dd> a default left margin of 40px. Set dd{margin-left:0} to remove it. To put a term and its description on one line, make dt and dd inline-block with fixed widths, or wrap each pair in a div and style the div as a row. Margins such as margin-left are covered in the Box Model lesson.
Can a dd be used outside a dl?
No. A <dd> belongs inside a <dl>, either directly or in a div that groups a pair, and it has to come after at least one <dt>. Anywhere else it is invalid and browsers attach no meaning to it. If all you want is indented text, use a paragraph with a CSS margin.