Tag HTML <dd>
Il tag HTML <dd> fornisce la descrizione di un termine in un elenco di descrizioni, usato insieme ai tag <dl> e <dt>.
Il tag HTML <dd> (description details) fornisce la descrizione di un termine in un elenco di descrizioni. Funziona solo all'interno di un <dl> (description list), abbinato a uno o più elementi <dt> (description term) che indicano ciò che viene descritto.
Il raggruppamento all'interno di un <dl> è flessibile — è possibile avere:
- un termine seguito da una descrizione,
- un termine seguito da più descrizioni,
- più termini (sinonimi) seguiti da una descrizione,
- più termini seguiti da più descrizioni.
L'elemento <dd> può contenere altro contenuto: paragrafi, elenchi, immagini, link e così via. È posizionato all'interno di <body>, come figlio di <dl>. Per impostazione predefinita i browser applicano un margine sinistro a <dd>, in modo che la descrizione sia visivamente posizionata sotto il termine.
Quando usare un elenco di descrizioni
Si usa <dl>/<dt>/<dd> per coppie nome-valore — contenuto in cui ogni elemento è un'etichetta con una descrizione associata. I casi d'uso più adatti includono:
- Glossari — una parola e il suo significato.
- FAQ — una domanda (
<dt>) e la sua risposta (<dd>). - Schede tecniche di prodotto / metadati — proprietà come "Peso", "Materiale", "SKU" e i loro valori.
Non ricorrere a un elenco di descrizioni solo per ottenere un'indentazione o per una sequenza arbitraria di elementi senza etichetta. Per passi ordinati si usa un elenco ordinato (<ol>); per un semplice insieme di elementi si usa un elenco non ordinato (<ul>). Si sceglie un elenco di descrizioni solo quando ogni voce è davvero un termine abbinato a una descrizione.
Sintassi
Il tag <dd> viene usato in coppia. Il contenuto è scritto tra i tag di apertura (<dd>) e di chiusura (</dd>), e deve trovarsi all'interno di un <dl> dopo uno o più elementi <dt>.
Esempio: un glossario
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Coffee glossary</h1>
<dl>
<dt>Espresso</dt>
<dd>A concentrated coffee brewed by forcing hot water through finely-ground beans.</dd>
<dt>Latte</dt>
<dd>Espresso with a large amount of steamed milk and a light layer of foam.</dd>
<dt>Americano</dt>
<dd>Espresso diluted with hot water for a lighter, longer drink.</dd>
</dl>
</body>
</html>Esempio: una scheda tecnica di prodotto
Un singolo termine può avere anche più descrizioni <dd>, e più termini <dt> possono condividere un solo <dd>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Backpack specifications</h2>
<dl>
<dt>Capacity</dt>
<dd>28 liters</dd>
<dt>Material</dt>
<dd>Recycled polyester</dd>
<dd>Water-resistant coating</dd>
<dt>Color</dt>
<dt>Colour</dt>
<dd>Charcoal grey</dd>
</dl>
</body>
</html>Accessibilità
L'elemento <dd> ha un ruolo ARIA implicito di definition, mentre <dt> ha il ruolo term. Le tecnologie assistive usano la struttura <dl> per annunciare ogni descrizione insieme al termine a cui appartiene, quindi mantenere il markup semantico (invece di simulare un elenco con <div> e CSS) rende il contenuto più facile da navigare. Non aggiungere un attributo role esplicito — il ruolo implicito è già corretto.
Attributi
Il tag <dd> non ha attributi specifici dell'elemento. Supporta solo gli Attributi globali e gli Attributi evento.
Come applicare stili al tag HTML <dd>
I browser applicano di default un margine sinistro (di solito 40px) a <dd>. È possibile rimuoverlo o sostituirlo con CSS — ad esempio, eliminare l'indentazione e aggiungere spaziatura e stili personalizzati:
dd {
margin-left: 0; /* remove the default left indent */
padding-left: 1rem; /* add your own spacing instead */
color: #555;
}
dt {
font-weight: bold;
}