Beschrijvende markup: Lijsten

Een van de meest gebruikte en meest overzichtelijke vormen van informatieoverdracht is de lijst. Lijsten zijn direct inzichtelijk voor de lezer: ze delen de informatie op in aandachtspunten, al dan niet geordend op prioriteit.

Gebruik ol (ordered list) en ul (unordered list) elementen voor het aangeven van lijsten.

Richtlijn R-pd.3.13

Ongeordende lijsten

Voor de meeste lijsten met opsommingen van punten gebruikt men een ongeordende lijst, een bullet list door middel van het ul (unordered list) element. Afzonderlijke punten in de list worden gemarkeerd via het li (list item) element.

Voorbeeld van een ongeordende lijst (HTML)

<ul>
  <li>Melk</li>
  <li>Brood</li>
  <li>Suiker</li>
</ul>

Soms zullen lijsten ook deel uitmaken van andere lijsten.

Een lijst binnen een lijst (HTML)

<ul>
  <li>Naar de kapper</li>
  <li>Naar de supermarkt:
    <ul>
      <li>Melk</li>
      <li>Brood</li>
      <li>Suiker</li>
    </ul>
  </li>
  <li>Naar de drogist</li>
</ul>

Een navigatiemenu is in veel gevallen ook een lijst, geordend of ongeordend. Het uiterlijk van een lijst en de daarin opgenomen punten kan beïnvloed worden via CSS (Cascading Style Sheets). Zo gebruiken veel websites indrukwekkende grafische menu’s op basis van lijst-markup en CSS.

Links en referenties

Geordende lijsten

Voor numerieke opsommingen en andere lijsten waarin de volgorde de prioriteit uitdrukt, wordt het ol (ordered list) elementgebruikt, met het al eerder genoemde li (list item) element. Hier een voorbeeld van een eenvoudige opsomminglijst, die zich uiteindelijk zal weergeven als een van 1 tot 3 genummerde lijst:

Voorbeeld van een geordende lijst (HTML)

<ol>
  <li>Rijd 400 meter rechtdoor</li>
  <li>Sla rechtsaf de Marktstraat in</li>
  <li>Na 200 meter bereikt u de Ruiterslaan</li>
</ol>

Het uiterlijk van geordende lijsten kan beïnvloed worden via CSS, maar de mogelijkheden zijn beperkt, doordat niet alle browsers het even goed ondersteunen. Vooral de notatie van de nummers is lastig te wijzigen. Dit maakt een het ol element in de praktijk minder geschikt voor toepassingen als uitgebreide inhoudsopgaven. Voor dergelijke toepassingen wordt aangeraden het ul element (ongeordende lijst) te gebruiken:

Genummerde lijst zonder ol markup (HTML)

<ul>
  <li>1. Introductie</li>
  <li>2. Publiceren
    <ul>
      <li>2.1. Schrijfstijl</li>
      <li>2.2. Briefstructuur</li>
      <li>2.3. Adressering</li>
    </ul>
  </li>
  <li>3. Redigeren</li>
</ul>

Definitielijsten

Voor lijsten met begrippen en definities, of trefwoorden, is een definitielijst geschikt. Hiervoor heeft men de beschikking over drie elementen: het dl (definition list) element, het dt (definition term) element en het dd (definition data) element.

Voorbeeld van een definitielijst (HTML)

<dl>
  <dt>Inflatie</dt>
  <dd>Ontwikkeling van het prijsindexcijfer van de gezinsconsumptie ten opzichte van het voorgaande jaar.</dd>
  <dt>IZW-huishoudens</dt>
  <dd>Instellingen zonder winstoogmerk die werken voor huishoudens, zoals vakbonden, sportverenigingen e.d.</dd>
  ...
</dl>

Gebruik het dl (definition list), het dt (definition term) en dd (definition data) element voor het aangeven van een lijst met definities.

Richtlijn R-pd.3.14

Alternatieven voor lijst markup

Het is niet altijd duidelijk wanneer een lijst kan worden gebruikt. Niet elke opsomming van onderwerpen is een lijst. Soms kan ook worden teruggevallen op heading-markup, zoals in dit voorbeeld van een stuk uit een document met algemene voorwaarden:

Heading-markup voor een lijstvormige indeling (HTML)

<h2>3. Annulering</h2>
<p>Indien de wederpartij, nadat een overeenkomst tot stand is gekomen, deze wenst te annuleren zal, indien wij met deze ontbinding instemmen, 15% van de orderprijs (incl. BTW) als annuleringskosten in rekening worden gebracht.</p>
<h2>4. Prijzen</h2>
...


 Webrichtlijnen versie 1.3, november 2007.