Beskrivelseslister: dl, dt og dd
Markér par af begreber og definitioner med beskrivelseslister.
Beskrivelseslister: dl, dt og dd er en gratis HTML Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i HTML Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. HTML Academy-kurset indeholder 4 lektioner i alt.
Hvad er en beskrivelsesliste?
En beskrivelsesliste samler termer med deres beskrivelser:
<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>Elementerne dl, dt og dd
Tre elementer udgør en beskrivelsesliste:
<dl>— beholder til beskrivelseslisten<dt>— beskrivelsesterm (nøglen)<dd>— beskrivelsesdetaljer (værdien)
Flere dd pr. dt
Én term kan have flere beskrivelser:
<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>Flere dt pr. dd
Flere termer kan dele én beskrivelse (synonymer, aliaser):
<dl>
<dt>Username</dt>
<dt>Login</dt>
<dt>Handle</dt>
<dd>The unique identifier used to log in to your account.</dd>
</dl>Anvendelser i praksis
Beskrivelseslister er perfekte til:
- Ordlister og definitioner
- FAQ-sektioner (spørgsmål → svar)
- Produktmetadata (Forfatter: Jane, Udgivet: 2024)
- Opskriftsdetaljer (Forberedelsestid: 10 min, Portioner: 4)
- Dokumentation af API-parametre
FAQ med dl
Opbyg en FAQ med beskrivelseslister:
<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 til metadata
Vis metadata for en artikel eller et produkt:
<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>Formgivning af dl
Formgiv beskrivelseslister med 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 */
}Indlejring af dl
Beskrivelseslister kan indlejres til hierarkiske definitioner:
<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 kontra table for nøgle-værdi-data
Hvornår skal du bruge <dl> kontra <table> til nøgle-værdi-data:
- dl — associationer mellem termer og beskrivelser (navn-værdi-par)
- table — tabulære data med rækker og kolonner (flere attributter pr. element)
<dl>
<dt>Name</dt><dd>Jane</dd>
<dt>Role</dt><dd>Developer</dd>
</dl>
<!-- vs table for multiple users with same attributes -->div'er i dl
Det er gyldig HTML5 at omslutte dt/dd-grupper i <div> inde i <dl>:
<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 -->Hurtig kontrol
Hvilket element indeholder definitionen/værdien i en beskrivelsesliste?
Opsummering: Beskrivelseslister
Det vigtigste om beskrivelseslister:
<dl>— beholder til en beskrivelsesliste<dt>— term (nøgle, spørgsmål, navn)<dd>— beskrivelse (værdi, svar, definition)- Én dt kan have flere dd; flere dt kan dele én dd
- Perfekt til ordlister, FAQ'er og metadata
- Omslut grupper i
<div>for fleksibel formgivning
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “Beskrivelseslister: dl, dt og dd” gratis?
Ja — alle 3 lektioner i læringssporet HTML Academy, inklusive “Beskrivelseslister: dl, dt og dd”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. HTML Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Beskrivelseslister: dl, dt og dd”?
Markér par af begreber og definitioner med beskrivelseslister. Du øver dig i HTML Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på HTML Academy?
Der kræves ingen tidligere erfaring. HTML Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Beskrivelseslister: dl, dt og dd”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne HTML Academy-lektion?
Ja. Alle HTML Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Uordnede lister: ul og li
- Ordnede lister: ol, start, reversed og type
- Beskrivelseslister: dl, dt og dd
- Indlejrede lister og listestyling