Om meerdere termen en beschrijvingen te groeperen, plaats je een of meer dt-elementen vóór een of meer dd-elementen binnen een dl. Deze handleiding laat zien hoe je de juiste groepering kiest, een kleine woordenlijst maakt in Teksteditor op een Mac en controleert of de relaties duidelijk blijven.

Hoe groepeert een HTML-beschrijvingslijst termen?

Een beschrijvingslijst geeft verbanden tussen namen en waarden weer. Elke groep bevat ten minste één term en ten minste één beschrijving, waarbij alle termen vóór de beschrijvingen staan. De eerstvolgende term na een beschrijving begint een nieuwe groep. Deze verbanden worden bepaald door de documentvolgorde. HTML-standaard: het dl-element

In een woordenlijst kan een term een woord over lay-out zijn en kan de beschrijving dat woord uitleggen. Meerdere opeenvolgende termen kunnen één beschrijving delen. Je hoeft dezelfde uitleg niet na elke alternatieve benaming te herhalen. MDN: Element voor beschrijvingsterm

De praktische vraag is wat bij elkaar hoort. Schrijf vóór je de markup maakt elke beoogde relatie in gewone taal op. In dit synthetische voorbeeld delen ‘Gap’ en ‘Gutter’ één uitleg, terwijl ‘Tile’ twee alternatieve betekenissen heeft.

Beoogde relatie Structuur binnen één groep
Eén term met één beschrijving Eén dt, gevolgd door één dd
Meerdere termen met één gedeelde beschrijving Alle dt-elementen, gevolgd door één dd
Eén term met alternatieve beschrijvingen Eén dt, gevolgd door meerdere dd-elementen
Meerdere termen met gedeelde alternatieve beschrijvingen Alle dt-elementen, gevolgd door alle dd-elementen
Eén beschrijving met meerdere alinea’s Eén dd met daarin de alinea’s

Deze patronen volgen de groeperingsregels van de standaard. Afzonderlijke beschrijvingen staan met name voor alternatieve waarden; alinea’s die bij één waarde horen, blijven binnen dezelfde dd. HTML-standaard: Semantiek van beschrijvingslijsten

Welke beschrijvingen horen bij elkaar in één groep?

Gebruik deze controlevraag: kan elke beschrijving in de voorgestelde groep redelijkerwijs van toepassing zijn op elke term in die groep? Als het antwoord nee is, splits je de inhoud op in afzonderlijke groepen. Dit is een redactionele controle die is afgeleid van het relatiemodel en helpt onbedoelde combinaties te ontdekken voordat ze op de pagina verschijnen.

Meerdere termen met één gedeelde beschrijving

Dit fragment geeft twee synthetische termen uit een woordenlijst één gedeelde uitleg. Beide termen staan vóór de beschrijving, volgens het door MDN gedocumenteerde patroon met meerdere termen. MDN: Meerdere termen, één beschrijving

<dl>
  <dt>Gap</dt>
  <dt>Gutter</dt>
  <dd>The space between adjacent columns.</dd>
</dl>

Lees dit niet als twee afzonderlijke items waarvan de beschrijvingen toevallig ontbreken. Het voorbeeld behandelt de twee namen bewust als één groep. Als ze in je eigen woordenlijst verschillende betekenissen hebben, geef dan elke naam een eigen beschrijving.

Eén term met alternatieve beschrijvingen

Een beschrijving kan binnen dezelfde groep op een andere beschrijving volgen. Hier gebruikt de verzonnen woordenlijst ‘Tile’ voor twee verschillende concepten. MDN: Element met beschrijvingsdetails

<dl>
  <dt>Tile</dt>
  <dd>A repeating unit in a visual pattern.</dd>
  <dd>A rectangular content block in a page layout.</dd>
</dl>

Als meerdere namen dezelfde alternatieven delen, plaats je de extra termen vóór de eerste beschrijving. Ga er niet van uit dat de eerste term alleen bij de eerste beschrijving hoort en de tweede term alleen bij de tweede: daarvoor zijn afzonderlijke groepen nodig. MDN documenteert expliciet dat meerdere termen en beschrijvingen kunnen worden gecombineerd. MDN: Meerdere termen en beschrijvingen

Eén beschrijving met meerdere alinea’s

Als de tweede alinea de eerste uitleg verder uitwerkt, houd je ze allebei binnen één dd. Een dd accepteert flowcontent, waaronder alinea’s. Zo blijft het één beschrijving, met ruimte voor een overzichtelijke interne structuur. MDN: Technische samenvatting van element met beschrijvingsdetails

<dl>
  <dt>Canvas</dt>
  <dd>
    <p>The working area for a composition.</p>
    <p>In this glossary, the term refers to the whole area.</p>
  </dd>
</dl>

Maak een volledig voorbeeld in Teksteditor op je Mac

Begin met een nieuw bestand, zodat je het resultaat kunt bekijken zonder een bestaand document te wijzigen. Kies in Teksteditor Archief > Nieuw en vervolgens Opmaak > Maak platte tekst. Apple beschrijft dit als het startpunt voor het maken van een HTML-bestand. Apple: Werken met HTML-documenten in Teksteditor op de Mac

Plak het volledige document hieronder. Het combineert de drie bovenstaande keuzes in één kleine woordenlijst. Elke groep heeft een eigen div-wrapper, een ondersteunde structuur om stijlen of kenmerken op een hele groep toe te passen. MDN: Groepen met naam-waardeparen omwikkelen

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Layout glossary</title>
</head>
<body>
  <h1>Layout glossary</h1>
  <dl>
    <div>
      <dt>Gap</dt>
      <dt>Gutter</dt>
      <dd>The space between adjacent columns.</dd>
    </div>
    <div>
      <dt>Tile</dt>
      <dd>A repeating unit in a visual pattern.</dd>
      <dd>A rectangular content block in a page layout.</dd>
    </div>
    <div>
      <dt>Canvas</dt>
      <dd>
        <p>The working area for a composition.</p>
        <p>In this glossary, the term refers to the whole area.</p>
      </dd>
    </div>
  </dl>
</body>
</html>

Kies Archief > Bewaar, geef het bestand de naam layout-glossary.html en klik op Bewaar. Als Teksteditor vraagt welke extensie je wilt gebruiken, kies je Gebruik .html. Dit zijn Apples gedocumenteerde stappen om een zelfgeschreven HTML-bestand te bewaren. Apple: Een HTML-bestand maken

Open het opgeslagen bestand in je browser. Vergelijk de weergegeven tekst met de drie verwachte relaties: ‘Gap’ en ‘Gutter’ delen één uitleg; ‘Tile’ heeft twee beschrijvingen; ‘Canvas’ heeft één beschrijving met twee alinea’s. Gebruik deze vergelijking om de beoogde inhoudelijke relaties te controleren, ook als de standaardafstand in de browser er anders uitziet dan je ontwerpvoorkeur.

Behoud de groepering tijdens het bewerken

HTML ondersteunt zowel directe term-beschrijvingsgroepen binnen dl als groepen die zijn omwikkeld met div-elementen. Gebruik één structuur door de hele lijst. Houd in de hierboven omwikkelde versie de termen en beschrijvingen van elke groep direct binnen de wrapper; omwikkel de termen en beschrijvingen niet in afzonderlijke containers. HTML-standaard: Inhoudsmodel van beschrijvingslijsten

Gebruik deze korte controle wanneer je het voorbeeld aanpast:

  1. Zoek de groep die je wilt wijzigen.
  2. Houd de volledige verzameling termen vóór de beschrijvingen.
  3. Bepaal of nieuwe uitleg een andere waarde is of een nieuwe alinea bij de huidige waarde.
  4. Voeg een nieuwe volledige groep toe wanneer je een niet-gerelateerde term introduceert.
  5. Bewaar het document en laad het browservoorbeeld opnieuw.

Als je bijvoorbeeld ‘Panel’ tussen de twee beschrijvingen van ‘Tile’ plaatst, onderbreek je de beoogde relatie: de volgende beschrijving hoort dan bij de nieuw begonnen groep. Plaats een nieuwe term en de bijbehorende beschrijving in hun eigen wrapper. Dit volgt de regel van de standaard dat een term die na een beschrijving komt, een nieuwe groep begint. HTML-standaard: Groeperingsalgoritme

Als Teksteditor het bestand opnieuw opent als opgemaakte tekst, kies je Archief > Open, selecteer je het document, klik je op Toon opties en selecteer je Negeer opdrachten voor rich text voordat je het opent. Selecteer voor toekomstige bestanden HTML-bestanden weergeven als HTML-code in plaats van opgemaakte tekst onder Teksteditor > Instellingen > Open en bewaar. Apple: Een HTML-document als code bekijken

Richt de laatste controle op de betekenis: bepaal welke termen er zijn, welke beschrijvingen ze delen en of alinea-einden niet per ongeluk afzonderlijke waarden worden. Zodra die relaties kloppen, is de woordenlijst klaar voor de vormgeving die je document nodig heeft.

Bronnen