Definitielijsten

Gepubliceerd op 29 december 2019 Leestijd : 2 minuten

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.

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.