Tag HTML dl - Impara HTML

Il tag HTML <dl> definisce un elenco di descrizioni (precedentemente chiamato elenco di definizioni). Raggruppa termini e le loro descrizioni come coppie nome–valore. L'elemento <dl> è il contenitore; al suo interno, ogni tag <dt> specifica un termine (il nome), e ogni tag <dd> specifica la descrizione di quel termine (il valore).

Questa pagina spiega quando usare <dl> al posto di un elenco non ordinato o ordinato, come raggruppare gli elementi per lo stile e i microdata, come si comporta il markup per l'accessibilità, e fornisce esempi eseguibili per i pattern più comuni.

Quando usare `<dl>`

Usa un elenco di descrizioni ogni volta che il contenuto è un insieme di coppie nome–valore anziché una sequenza piatta di elementi. Ricorri a <dl> per:

Glossari e dizionari — un termine seguito dalla sua definizione.
FAQ — ogni domanda è un <dt>, ogni risposta è un <dd>.
Metadati — coppie chiave–valore come Autore, Pubblicato, Stato.
Dialoghi o copioni — il parlante è il termine, la battuta pronunciata è la descrizione.
Specifiche di prodotto — Peso, Dimensioni, Materiale, ciascuno con un valore.

Preferisci un <ul> quando gli elementi non hanno un ordine intrinseco e nessun valore associato, e un <ol> quando l'ordine o la numerazione è rilevante. La caratteristica distintiva di <dl> è l'abbinamento di un nome con uno o più valori.

Non usare <dl> solo per rientrare il testo. Ha un significato semantico e usarlo per il layout visivo oscura tale significato. Per rientrare visivamente il contenuto, usa invece la proprietà CSS margin o padding.

Sintassi

Il tag <dl> va in coppia. I termini e le descrizioni vengono scritti tra il tag di apertura (<dl>) e quello di chiusura (</dl>).

Esempio del tag HTML `<dl>`:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <dl>
      <dt>Hypertext</dt>
      <dd>A system of text pages that have cross-references.</dd>
      <dt>Hyperlink</dt>
      <dd>A part of a hypertext document that references another item.</dd>
    </dl>
  </body>
</html>

Provalo tu stesso »

Più termini e descrizioni

Un singolo <dt> può avere più descrizioni <dd>, e più termini <dt> possono condividere una sola descrizione <dd>. Questo consente di modellare sinonimi, alternative e definizioni raggruppate.

<dl>
  <!-- One term, multiple descriptions -->
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform web browser.</dd>
  <dd>Developed and maintained by the Mozilla Foundation.</dd>

  <!-- Multiple terms sharing one description -->
  <dt>JS</dt>
  <dt>JavaScript</dt>
  <dt>ECMAScript</dt>
  <dd>The programming language of the web.</dd>
</dl>

Raggruppare le coppie con `<div>`

HTML5 consente di racchiudere ogni gruppo nome–valore in un <div> posizionato direttamente all'interno del <dl>. Questo è markup valido ed è utile quando si vuole:

applicare CSS a un'intera coppia alla volta (ad esempio con Flexbox o CSS Grid),
allegare microdata o attributi globali come class o data-* a un singolo gruppo.

Il <div> è l'unico elemento, oltre a <dt> e <dd>, consentito come figlio diretto di <dl>.

<dl>
  <div class="row">
    <dt>Name</dt>
    <dd>Ada Lovelace</dd>
  </div>
  <div class="row">
    <dt>Field</dt>
    <dd>Mathematics</dd>
  </div>
  <div class="row">
    <dt>Known for</dt>
    <dd>The first published algorithm for a computer.</dd>
  </div>
</dl>

.row {
  display: flex;
  gap: 1rem;
}
.row dt {
  width: 8rem;
  font-weight: bold;
}

Accessibilità

Un elenco di descrizioni è un modo accessibile per esporre relazioni chiave–valore, ma solo quando il markup viene utilizzato semanticamente.

Gli elementi <dt> hanno un ruolo implicito term e gli elementi <dd> un ruolo implicito definition, quindi le tecnologie assistive capiscono quale elemento è il nome e quale è il valore.
I lettori di schermo annunciano tipicamente un conteggio, come "elenco di descrizioni, 3 termini", e poi leggono ogni termine seguito dalla sua descrizione. L'abbinamento deve essere ovvio dal testo da solo, quindi scrivi ogni <dd> in modo che il suo legame con il <dt> precedente sia chiaro anche fuori contesto.
Il raggruppamento opzionale con <div> non interrompe questo comportamento. I ruoli term e definition si applicano ancora perché gli elementi <dt> e <dd> rimangono discendenti validi del <dl>.

Attributi

Il tag <dl> supporta gli attributi globali e gli attributi evento.

Come stilizzare il tag HTML `<dl>`

Per impostazione predefinita, i browser rientrano ogni <dd> e dispongono termini e descrizioni verticalmente. Puoi azzerare e ridefinire lo stile con CSS:

dl {
  margin: 0;
  padding: 0;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: 20px;
}

Esercizio

Pratica

Quali affermazioni sul tag HTML dl sono corrette?

Il tag dl crea un elenco di descrizioni di coppie termine–valore.Il tag dl viene utilizzato per creare un elenco a discesa in HTML.Il tag dt specifica un termine e il tag dd specifica la sua descrizione all'interno di un dl.Il tag dl non può essere combinato con altri tag.Un div può raggruppare una coppia dt e dd come figlio diretto di dl in HTML5 valido.Un singolo dt può avere sempre e solo esattamente un dd.

Quando usare <dl>