Attributen
Dit element bevat ook de globale attributen.
compact Verouderd | Dit Booleaanse attribuut geeft aan dat de lijst compact moet worden weergegeven. De interpretatie van dit attribuut is browserspecifiek. Gebruik in plaats daarvan CSS: om een vergelijkbaar effect als het compact-attribuut te bereiken, kan de CSS-eigenschap line-height worden gebruikt met een waarde van 80%. |
|---|
Toegankelijkheid
Elke schermlezer geeft <dl>-inhoud op een andere manier weer, inclusief het totale aantal, de context van termen/definities en de navigatiemethoden. Deze verschillen zijn niet noodzakelijk bugs.
Vanaf iOS 14 kondigt VoiceOver aan dat <dl>-inhoud een lijst is bij navigatie met de virtuele cursor (niet via het commando "alles voorlezen"). VoiceOver ondersteunt geen lijstnavigatiecommando's bij <dl>. Wees voorzichtig met het toepassen van de ARIA-rollen term en definition op <dl>-constructies, aangezien VoiceOver (macOS en iOS) de manier waarop ze worden aangekondigd, aanpast.
Voorbeelden
Eén term en beschrijving
<dl>
<dt>Firefox</dt>
<dd>
A free, open source, cross-platform, graphical web browser developed by the
Voorbeeld Corporation and hundreds of volunteers.
</dd>
<!-- Other terms and descriptions -->
</dl>Resultaat
Meerdere termen, één beschrijving
<dl>
<dt>Firefox</dt>
<dt>Voorbeeld Firefox</dt>
<dt>Fx</dt>
<dd>
A free, open source, cross-platform, graphical web browser developed by the
Voorbeeld Corporation and hundreds of volunteers.
</dd>
<!-- Other terms and descriptions -->
</dl>Resultaat
Eén term, meerdere beschrijvingen
<dl>
<dt>Firefox</dt>
<dd>
A free, open source, cross-platform, graphical web browser developed by the
Voorbeeld Corporation and hundreds of volunteers.
</dd>
<dd>
The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a
mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).
</dd>
<!-- Other terms and descriptions -->
</dl>Resultaat
Meerdere termen en beschrijvingen
Het is ook mogelijk om meerdere termen met meerdere bijbehorende beschrijvingen te definiëren, door de bovenstaande voorbeelden te combineren.
Metadata
Beschrijvingslijsten zijn handig voor het weergeven van metadata als een lijst van sleutel-waardeparen.
<dl>
<dt>Name</dt>
<dd>Godzilla</dd>
<dt>Born</dt>
<dd>1952</dd>
<dt>Birthplace</dt>
<dd>Japan</dd>
<dt>Color</dt>
<dd>Green</dd>
</dl>Resultaat
Tip: Het kan handig zijn om een scheidingsteken tussen sleutel en waarde in de CSS te definiëren, zoals:
dt::after {
content: ": ";
}Naam-waardegroepen omwikkelen met div-elementen
HTML staat toe dat elke naam-waardegroep in een <dl>-element wordt omwikkeld met een <div>-element. Dit kan handig zijn bij gebruik van microdata, of wanneer globale attributen van toepassing zijn op een hele groep, of om stylingredenen.
<dl>
<div>
<dt>Name</dt>
<dd>Godzilla</dd>
</div>
<div>
<dt>Born</dt>
<dd>1952</dd>
</div>
<div>
<dt>Birthplace</dt>
<dd>Japan</dd>
</div>
<div>
<dt>Color</dt>
<dd>Green</dd>
</div>
</dl>Resultaat
Opmerkingen
Gebruik dit element (en ook geen <ul>-elementen) niet enkel om inspringing op een pagina te creëren. Hoewel het werkt, is dit een slechte gewoonte en vertroebelt het de betekenis van beschrijvingslijsten.
Gebruik de CSS-eigenschap margin om de inspringing van een beschrijvingsterm te wijzigen.
Technische samenvatting
| Inhoudscategorieën |
Flow content, en als de kinderen van het <dl>-element uit ten
minste één naam-waardegroep bestaan, tastbare content (palpable content).
|
|---|---|
| Toegestane inhoud |
Ofwel: nul of meer groepen, elk bestaande uit één of meer
|
| Weglaten van tags | Geen, zowel de begin- als de eindtag zijn verplicht. |
| Toegestane ouders | Elk element dat flow content accepteert. |
| Impliciete ARIA-rol | Geen overeenkomstige rol |
| Toegestane ARIA-rollen |
group,
list, none, presentation
|
| DOM-interface | HTMLDListElement |