Geschreven door: op zondag 29 december 2019

Leestijd:

In het vorige blogitem ging het over het semantisch correct gebruikmaken van opsommingen, via <ul>, <ol> en <li>. Deze opsommingen zijn relatief eenvoudige datastructuren, waarin weliswaar sprake kan zijn van gelaagdheid via lijstjes in lijstjes, maar er zijn geen onderliggende relaties te definiëren. Om data met relaties weer te geven, zijn er enkele elementen beschikbaar in HTML, waaronder DL (en DD en DT) en tables.

Definition list

Met <dl> geef je een definition list aan. Dit is een lijst net als een unordered of ordered list, maar in plaats van een verzameling van een of meer listitems, geef je een verzameling paren van <dt> en <dd> op.DT voor definition term en DD staat voor definition description. De eerste geeft als het ware het type aan, en de tweede de waarde. Vergelijkbaar met key-value-pairs. Bijvoorbeeld:

<dl>
<dt>Kleur</dt>
<dd>Rood</dd>
<dt>Gereedschap</dt>
<dd>Hamer</dd>
</dl>


Geeft:

Kleur
Rood
Gereedschap
Hamer

In bovenstaande voorbeeld wordt aangegeven dat de kleur rood is en het gereedschap een hamer. Je kan meerdere DD's bij één of meerdere DT's plaatsen en meerdere DT's bij een of meerdere DD's:

<dl>
  <dt>Alias</dt>
  <dt>Naam</dt>
  <dd>Dominique</dd>
  <dt>Favoriete TV-series</dt> 
  <dd>X-Files</dd>
  <dd>Stargate SG-1</dd>
  <dd>Star Trek : TOS</dd>
</dl>

Geeft:

Alias
Naam
Dominique
Favoriete TV-series
X-Files
Stargate SG-1
Star Trek : TOS

Met DL, DT en DD creëer je dus bepaalde definities, een semantische relatie tussen een termen en een waardes. In bovenstaande voorbeelden zijn dat simpele definities, maar je kan het ook gebruiken om metadata van een bepaald object weer te geven of een stappenplan (zie het voorbeeld van whatwg.org).

DFN

Een gerelateerd HTML-element is DFN. Hiermee definieer je op een andere manier een bepaalde term. De tag DFN staat om de term en de definitie is het bovenliggende blok (dat mag P, DT/DD of SECTION zijn), zie:

The HTML Definition element (<dfn>) is used to indicate the term being defined within the context of a definition phrase or sentence. The <p> element, the <dt>/<dd> pairing, or the <section> element which is the nearest ancestor of the <dfn> is considered to be the definition of the term.


Andere blogartikelen

Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Allrig is de alles in een leverancier binnen de energie-industrie
AOC is een toonaangevend wereldwijd bedrijf actief in de verkoop van kwaliteitsharsen
ERIKS is een toonaangevende en innovatieve leverancier aan de procesindustrie en aan machinebouwers, die zowel de rol van specialist als die van brede MRO-leverancier vervult
Industrieel dienstverlener Heinen & Hopman Engineering uit Bunschoten is dé wereldwijde specialist op het gebied van klimaatbeheersing
Handicare is een internationale organisatie die ouderen helpt om hun dagelijks leven gemakkelijker te maken door het produceren van hoogwaardige trapliften
Op de hoogte blijven?

Meld u aan voor de gratis nieuwsbrief om op de hoogte te blijven van onze activiteiten