Français

<dl>

Structure key-value pairs: glossary, order summary, FAQ, metadata

— 1 min read

  • HTML
  • accessibility
  • semantics
  • lists

<dl> + <dt> + <dd> — The description list

The <dl> element represents a description list — pairs of terms (<dt>) and descriptions (<dd>). It is not limited to glossaries — any key-value content fits.

When to use it

You want to display a glossary of technical terms, an order summary (product/price), a FAQ (question/answer), metadata (author, date, category), or any key-value pair.

What you gain

Accessibility: screen readers announce the term-description relationship. Users navigate from term to term and hear the associated description.

Code example

<dl>
  <dt>Semantic HTML</dt>
  <dd>HTML that conveys meaning, not just presentation.</dd>
 
  <dt>Landmark</dt>
  <dd>A region of the page identified by its role (banner, main, navigation).</dd>
 
  <dt>Screen reader</dt>
  <dd>Assistive technology that reads page content aloud.</dd>
</dl>
<dl>
  <dt>Product</dt>
  <dd>Ergonomic keyboard</dd>
 
  <dt>Quantity</dt>
  <dd>1</dd>
 
  <dt>Total</dt>
  <dd>89.00 EUR</dd>
</dl>

Further reading