Description Lists: dl, dt and dd

Concept

A description list holds name and value pairs. Each dt is a term and each dd is its description, and the pairing is structural rather than visual.

The element was originally called a definition list, which is why so many people think it is only for dictionaries. It was renamed precisely because that reading was too narrow.

Syntax

<dl>
  <dt>Term</dt>
  <dd>What the term means</dd>

  <dt>Another term</dt>
  <dd>What that one means</dd>
</dl>

Where it fits

A glossary

<dl>
  <dt>Void element</dt>
  <dd>An element with no content and therefore no end tag, such as img or br.</dd>

  <dt>Landmark</dt>
  <dd>A region of the page assistive technology can jump to directly, such as nav or main.</dd>
</dl>

Product specifications

<dl class="spec">
  <dt>Capacity</dt>
  <dd>2 litres</dd>

  <dt>Power</dt>
  <dd>1500 watts</dd>

  <dt>Warranty</dt>
  <dd>Two years</dd>
</dl>

This is the case where a description list beats a two column table. A specification sheet is a set of pairs, not a grid of rows and columns, and a table forces a screen reader to announce a column header that does not exist.

Article metadata

<dl class="meta">
  <dt>Published</dt>
  <dd><time datetime="2026-08-12">12 August 2026</time></dd>

  <dt>Author</dt>
  <dd>Meera Iyer</dd>

  <dt>Reading time</dt>
  <dd>Seven minutes</dd>
</dl>

One to many, and many to one

The pairing does not have to be one to one, which is what makes the element more capable than it first appears.

<!-- one term, several descriptions -->
<dl>
  <dt>Accepted payment</dt>
  <dd>Bank transfer</dd>
  <dd>Demand draft</dd>
  <dd>Card, at the counter only</dd>
</dl>

<!-- several terms sharing one description -->
<dl>
  <dt>Deferred</dt>
  <dt>Postponed</dt>
  <dd>Moved to a later date, with the original booking retained.</dd>
</dl>

Grouping with div

A description list is the one list type where a div is allowed as a direct child, specifically so that a term and its descriptions can be wrapped together for styling.

<dl class="spec">
  <div class="spec-row">
    <dt>Capacity</dt>
    <dd>2 litres</dd>
  </div>
  <div class="spec-row">
    <dt>Power</dt>
    <dd>1500 watts</dd>
  </div>
</dl>

This makes a two column grid layout straightforward:

.spec-row {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 0.5rem 1.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #e2e8f0;
}
.spec dt { font-weight: 600; }
.spec dd { margin: 0; }

Important rules

• A dl may contain dt, dd and div wrappers, and nothing else.
• Every dt must be followed by at least one dd.
• A dd must not appear before any dt.
• Browsers indent dd by default. Reset the margin in CSS.
• Both dt and dd may contain block content.
• Support in older assistive technology is patchy compared with ul, so keep the structure simple.

Common mistakes

• Believing it is only for dictionary definitions.
• Using it for a general two column layout that is not made of pairs. Use a grid.
• Wrapping each pair in a li. Only dt, dd and div are permitted.
• Writing a dt with no dd after it.
• Using a table for a specification sheet, where a description list is a better fit.
• Leaving the default indent and assuming it cannot be changed.

Best practices

• Reach for dl whenever the content is genuinely name and value pairs.
• Wrap pairs in a div when the layout needs it.
• Reset dd margins and lay the list out with a grid.
• Keep terms short. The term is the label, not the sentence.
• Use a table only when there are two or more genuine columns of data.

Practice

1. Mark up a product specification sheet with six pairs, laid out as two columns using a grid.
2. Write a description list where one term has three descriptions and two terms share one.
3. Convert a two column table of article metadata into a description list. Which conveys the relationship better, and why?
4. Explain in one sentence when a table is the right choice instead.