Elenchi descrittivi: dl, dt e dd
Contrassegnare le coppie termine-definizione con gli elenchi descrittivi
Elenchi descrittivi: dl, dt e dd è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.
Che cos'è un elenco di descrizioni?
Un elenco di descrizioni raggruppa i termini con le relative descrizioni:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language — the structure of the web.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets — the presentation of the web.</dd>
<dt>JavaScript</dt>
<dd>The programming language of the web.</dd>
</dl>Gli elementi dl, dt e dd
Tre elementi compongono un elenco di descrizioni:
<dl>: contenitore dell'elenco di descrizioni<dt>: termine della descrizione (la chiave)<dd>: dettagli della descrizione (il valore)
Più dd per ogni dt
Un termine può avere più descrizioni:
<dl>
<dt>HTML</dt>
<dd>Stands for HyperText Markup Language.</dd>
<dd>First published as HTML 2.0 in 1995.</dd>
<dd>Current version: HTML5 (Living Standard).</dd>
</dl>Più dt per ogni dd
Più termini possono condividere una descrizione (sinonimi, alias):
<dl>
<dt>Username</dt>
<dt>Login</dt>
<dt>Handle</dt>
<dd>The unique identifier used to log in to your account.</dd>
</dl>Casi d'uso reali
Gli elenchi di descrizioni sono perfetti per:
- Glossari e definizioni
- Sezioni FAQ (domanda → risposta)
- Metadati dei prodotti (Autore: Jane, Pubblicato: 2024)
- Dettagli delle ricette (Tempo di preparazione: 10 min, Porzioni: 4)
- Documentazione dei parametri API
FAQ con dl
Costruisca una FAQ con gli elenchi di descrizioni:
<dl class="faq">
<dt>Is HTML a programming language?</dt>
<dd>No. HTML is a markup language. It defines structure and meaning, not logic or computation.</dd>
<dt>Do I need to close void elements?</dt>
<dd>In HTML5, void elements like <img> and <br> do not need a closing slash.</dd>
</dl>dl per i metadati
Visualizzi i metadati di un articolo o di un prodotto:
<article>
<h1>Responsive Images Guide</h1>
<dl class="metadata">
<dt>Author</dt>
<dd>Jane Smith</dd>
<dt>Published</dt>
<dd><time datetime="2024-03-15">March 15, 2024</time></dd>
<dt>Reading time</dt>
<dd>8 minutes</dd>
</dl>
</article>Stilizzare dl
Stilizzi gli elenchi di descrizioni con CSS:
/* Two-column layout */
dl {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.25rem 1rem;
}
dt {
font-weight: bold;
color: #555;
}
dd {
margin: 0; /* Remove browser default dd margin */
}Annidare dl
Gli elenchi di descrizioni possono essere annidati per definizioni gerarchiche:
<dl>
<dt>HTML Elements</dt>
<dd>
<dl>
<dt>Block elements</dt>
<dd>Take full width: div, p, h1-h6</dd>
<dt>Inline elements</dt>
<dd>Flow with text: span, a, strong</dd>
</dl>
</dd>
</dl>dl vs table per dati chiave-valore
Quando utilizzare <dl> invece di <table> per dati chiave-valore:
- dl: associazioni tra termini e descrizioni (coppie nome-valore)
- table: dati tabellari con righe e colonne (più attributi per elemento)
<dl>
<dt>Name</dt><dd>Jane</dd>
<dt>Role</dt><dd>Developer</dd>
</dl>
<!-- vs table for multiple users with same attributes -->Div all'interno di dl
Racchiudere i gruppi dt/dd in <div> all'interno di <dl> è valido in HTML5:
<dl>
<div>
<dt>HTML</dt>
<dd>Markup language for web pages.</dd>
</div>
<div>
<dt>CSS</dt>
<dd>Styling language for web pages.</dd>
</div>
</dl>
<!-- Useful for zebra-striping or grouping with CSS -->Verifica rapida
Quale elemento contiene la definizione o il valore in un elenco di descrizioni?
Riepilogo: elenchi di descrizioni
Elementi essenziali degli elenchi di descrizioni:
<dl>: contenitore dell'elenco di descrizioni<dt>: termine (chiave, domanda, nome)<dd>: descrizione (valore, risposta, definizione)- Un dt può avere più dd; più dt possono condividere un dd
- Sono perfetti per glossari, FAQ e metadati
- Racchiuda i gruppi in
<div>per una maggiore flessibilità nello stile
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 40
- Lezioni
- 159
Domande Frequenti
La lezione «Elenchi descrittivi: dl, dt e dd» è gratuita?
Sì — il testo completo di «Elenchi descrittivi: dl, dt e dd» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.
Cosa imparerò in «Elenchi descrittivi: dl, dt e dd»?
Contrassegnare le coppie termine-definizione con gli elenchi descrittivi Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML Academy?
Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Elenchi descrittivi: dl, dt e dd»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML Academy?
Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Elenchi non ordinati: ul e li
- Elenchi ordinati: ol, start, reversed e type
- Elenchi descrittivi: dl, dt e dd
- Elenchi annidati e stili degli elenchi