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

  • Tabellen in HTML

    Geschreven door: op maandag 30 december 2019

    Met UL, OL en LI maak je opsommingen. Met DL, DT en DD maak je lijsten van definities. Naast opsommingen en definities is er ook nog tabulaire data: gegevens die in een tabel staan, waarbij je rijen h ...

    Bekijk het artikel »
  • SQL en het gebruik van For XML: Explicit en Path

    Geschreven door: op maandag 30 december 2019

    In mijn vorige blog hebben we For XML Raw en For XML Auto besproken. In deze blog zullen we For XML Explicit en For XML Path doornemen. Hieronder eerst wat uitleg over beide:EXPLICIT: Met ...

    Bekijk het artikel »
  • UX audit: heatmaps

    Geschreven door: op maandag 30 december 2019

    Een UX audit kun je uitvoeren op een digitaal product met als doel er achter te komen waar gebruikers van het product tegenaan lopen in het gebruik van bijvoorbeeld uw site. Door een UX audit te laten ...

    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