<dl>: the "description list" element

The HTML <dl> element represents a list of descriptions. The element encloses a list of groups of terms (specified using the <dt> element) and descriptions (provided by <dd> elements). Common uses of this element are implementing a glossary or displaying metadata (a list of key-value pairs).

Examples

Single term and description

<dl>
  <dt>Firefox</dt>
  <dd>
    Un programma gratuito, open source, multipiattaforma,
    browser web grafico sviluppato da
    Mozilla Corporation e centinaia di
    volontari.
  </dd>

  <!-- Altri termini e descrizioni -->
</dl>

Multiple terms, one description

<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>
    Un programma gratuito, open source, multipiattaforma,
    browser web grafico sviluppato da
    Mozilla Corporation e centinaia di
    volontari.
  </dd>
                                      
  <!-- Altri termini e descrizioni -->
</dl>

One term, multiple descriptions

<dl>
  <dt>Firefox</dt>
  <dd>
    Un programma gratuito, open source, multipiattaforma,
    browser web grafico sviluppato da
    Mozilla Corporation e centinaia di
    volontari.
  </dd>
  <dd>
  Il panda rosso noto anche come Lesser Panda,
  Wah, Gatto Orso o Firefox, è un mammifero prevalentemente erbivoro,
  leggermente più grande di un gatto domestico (60 cm di lunghezza).
  </dd>
                                      
  <!-- Altri termini e descrizioni -->
</dl>

More terms and descriptions

It is also possible to define multiple terms with multiple matching descriptions by combining the examples above.

Metadata

Description lists are useful for viewing metadata as a list of key-value pairs.

<dl>
  <dt>Nome</dt>
  <dd>Godzilla</dd>
  <dt>Data di nascita</dt>
  <dd>1952</dd>
  <dt>Luogo di nascita</dt>
  <dd>Giappone</dd>
  <dt>Colore</dt>
  <dd>Verde</dd>
</dl>

Tip: It can be useful to define a key-value separator in your CSS, for example:

dt::after {
  content: " : ";
}

Wrapping name-value groups in div elements

<div>
  <div>
    <dt>Nome</dt>
    <dd>Godzilla</dd>
  </div>
  <div>
    <dt>Data di nascita</dt>
    <dd>1952</dd>
  </div>
  <div>
    <dt>Luogo di nascita</dt>
    <dd>Giappone</dd>
  </div>
  <div>
    <dt>Colore</dt>
    <dd>Verde</dd>
  </div>
</dl>

Notes

Do not use this element (or <ul> elements) to simply create an indent on a page. While this works, this is bad practice and obscures the meaning of description lists.

To change the indentation of a descriptive term, use the CSS margin property.

Accessibility issues

Each screen reader announces the content <dl> differently. Starting in iOS 14, VoiceOver will announce that the content <dl> is a list when navigating with the virtual cursor (not using the read all command). For this reason, ensure that the content of each list item is written in a way that communicates its relationship to the other list items in the list grouping.