HTML <dt> Tag
Il tag <dt> viene usato per indicare un termine in un elenco di definizioni. Descrizione, attributi ed esempi.
Il tag <dt> (abbreviazione di description term, in precedenza definition term) indica il termine definito all'interno di un elenco di descrizioni. È uno dei tre tag che costruiscono tale elenco, insieme a <dl> e <dd>:
<dl>racchiude l'intero elenco (il description list).<dt>denomina un termine, come una parola in un glossario o un'etichetta di metadati.<dd>fornisce la descrizione o il valore del termine precedente.
Usa un elenco di descrizioni ogni volta che il contenuto è naturalmente un insieme di coppie nome/valore: un glossario, domande e risposte di FAQ, metadati chiave/valore o definizioni di termini. Per i contenuti ordinati o puntati, usa invece un tipo di elenco diverso — consulta la panoramica degli elenchi HTML.
Regole strutturali
L'elemento <dt> ha due requisiti da rispettare per ottenere un markup valido e accessibile:
<dt>deve essere un figlio diretto di<dl>. Non può comparire da solo al di fuori di un elenco di descrizioni (o, in HTML moderno, all'interno di un singolo<div>di contenimento direttamente dentro il<dl>).<dt>deve precedere il suo<dd>. Ogni gruppo inizia con uno o più termini (<dt>), seguiti da una o più descrizioni (<dd>). Un<dd>descrive il o gli elementi<dt>che lo precedono.
Il tag <dt> viene usato in coppia: il contenuto va tra il tag di apertura <dt> e quello di chiusura </dt>.
Esempio del tag HTML <dt>:
Tag HTML <dt>
<!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>Risultato
Più termini e più descrizioni
Un gruppo di descrizioni non è limitato a un solo termine e a una sola descrizione. È possibile abbinare più elementi <dt> e <dd> nello stesso gruppo.
Più <dt> per un unico <dd> — usalo quando più termini condividono una stessa definizione, ad esempio sinonimi o grafie alternative:
<dl>
<dt>Firefox</dt>
<dt>Mozilla Firefox</dt>
<dt>Fx</dt>
<dd>A free, open-source web browser developed by the Mozilla Foundation.</dd>
</dl>Più <dd> per un unico <dt> — usalo quando un singolo termine ha più di un significato o valore:
<dl>
<dt>Coffee</dt>
<dd>A hot beverage brewed from roasted coffee beans.</dd>
<dd>The seeds of the coffee plant.</dd>
</dl>Un esempio pratico: metadati di prodotto
Gli elenchi di descrizioni si prestano alla perfezione per i metadati chiave/valore. In questo esempio ogni <dt> è un'etichetta e ogni <dd> è il suo valore:
<dl>
<dt>Product name</dt>
<dd>Mechanical Keyboard K3</dd>
<dt>Manufacturer</dt>
<dd>Keychron</dd>
<dt>Connectivity</dt>
<dd>Bluetooth 5.1</dd>
<dd>USB-C (wired)</dd>
<dt>Price</dt>
<dd>$79.99</dd>
</dl>Il termine Connectivity ha due valori <dd> — un modo elegante per elencare più valori per una sola etichetta.
Rendering predefinito
I browser non applicano alcuno stile speciale a <dt> per impostazione predefinita: il termine viene visualizzato con peso normale (non in grassetto), mentre ogni <dd> seguente è rientrato sotto di esso. La gerarchia visiva che di solito ci si aspetta da un glossario — termini in grassetto — proviene dal CSS, non dai comportamenti predefiniti del browser.
Attributi
Il tag <dt> supporta gli attributi globali e gli attributi evento.
Come stilizzare un tag HTML <dt>
Lo snippet qui sotto sovrascrive il rendering predefinito: rende i termini in grassetto e assegna loro un colore distinto, così si distinguono dalle rispettive descrizioni.
dt {
font-weight: bold;
color: #2c3e50;
}Accessibilità
Gli elenchi di descrizioni trasmettono un significato che va al di là del loro aspetto visivo. I lettori di schermo riconoscono la struttura <dl>/<dt>/<dd> e annunciano ogni <dt> come termine insieme alla descrizione <dd> associata, cosicché gli utenti sentono il termine e il suo valore come una coppia collegata. Simulare lo stesso aspetto con paragrafi semplici e CSS fa perdere questa relazione semantica. Usa un vero elenco di descrizioni ogni volta che il contenuto è genuinamente un insieme di coppie termine/descrizione.