<dl>: l'elemento "elenco delle descrizioni"

L' elemento HTML <dl> rappresenta un elenco di descrizioni. L'elemento racchiude un elenco di gruppi di termini (specificati mediante l' elemento <dt>) e descrizioni (fornite da elementi <dd>). Gli usi comuni di questo elemento sono l'implementazione di un glossario o la visualizzazione di metadati (un elenco di coppie chiave-valore).

Esempi

Termine unico e descrizione

<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>

Più termini, un'unica descrizione

<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>

Un solo termine, più descrizioni

<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>

Più termini e descrizioni

È anche possibile definire più termini con più descrizioni corrispondenti, combinando gli esempi sopra.

Metadati

Gli elenchi di descrizione sono utili per visualizzare i metadati come un elenco di coppie chiave-valore.

<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>

Suggerimento: può essere utile definire un separatore valore-chiave nel CSS, ad esempio:

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

Avvolgimento di gruppi nome-valore in elementi div

<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>

Appunti

Non utilizzare questo elemento (né elementi <ul>) per creare semplicemente un'indentazione su una pagina. Sebbene funzioni, questa è una cattiva pratica e oscura il significato degli elenchi di descrizioni.

Per modificare il rientro di un termine descrittivo, utilizzare la proprietà CSS margin.

Problemi di accessibilità

Ogni screen reader annuncia il contenuto <dl> in modo diverso. A partire da iOS 14, VoiceOver annuncerà che il contenuto <dl> è un elenco durante la navigazione con il cursore virtuale (non tramite il comando leggi tutto). Per questo motivo, assicurati che il contenuto di ogni elemento dell'elenco sia scritto in modo tale da comunicare la sua relazione con gli altri elementi dell'elenco nel raggruppamento dell'elenco.