Definitielijsten

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

  • Het gebruik van await in C#

    Geschreven door: op zaterdag 28 maart 2020

    Binnen applicaties kunnen soms functies voorkomen die lang nodig hebben om te voltooien. Denk bijvoorbeeld aan een call naar een API van een derde partij die veel data teruggeeft die verwerkt moet wor ...

    Bekijk het artikel »
  • Het gebruik van de SemaphoreSlim class in C#

    Geschreven door: op zaterdag 28 maart 2020

    Webapplicaties kunnen meerdere calls vanuit meerdere plekken verwerken zonder dat deze requests op elkaar moeten wachten. Maar soms heb je te maken met een usecase waar je helemaal niet wilt dat funct ...

    Bekijk het artikel »
  • SQL en het gebruik van JOIN

    Geschreven door: op zaterdag 28 maart 2020

    Binnen SQL heb je verschillende manieren om tabellen met elkaar te koppelen om zo data uit beide tabellen terug te krijgen in de resultaten. Maar wat houdt elk van deze joins in?Verschillende typenE ...

    Bekijk het artikel »
Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Onze Middelen en Technologieën
microsoft silver partner
Adobe partner
fd-gazellen-2018.jpg
Google analytics
partners-logo.jpg
Op de hoogte blijven?

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