R-pd.3.13

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

Rol:: Ontwikkelaar,; Webredacteur.
Projectfase:: Bouw,; Contentcreatie/-migratie,; Beheer.
Voordeel:: Meer mensen bereiken,; Werkt op alle systemen.
Onderwerp:: Markup.
Conformiteitsniveau:: Drempelvrij/WCAG prio 2,; Webrichtlijnen.

Het markeren van 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.

Uitleg van deze richtlijn

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.

Wanneer is een ongeordende lijst gepast? Een voorbeeld: Een webpagina bevat een recept, met een lijst van de benodigde ingrediënten. De lijst is niet afhankelijk van de lijstvolgorde, dus wordt een unordered list gebruikt.

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.

Wanneer is een geordende lijst gepast? Een voorbeeld: Een webpagina geeft een lijst met stappen voor het invullen van een verzekeringsclaim. De volgorde van deze stappen is essentieel, dus wordt een ordered list gebruikt.

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. Voorbeeld van een genummerde lijst zonder ol markup.

Navigatiemenu

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.

Definitielijsten

Voor lijsten met begrippen en definities, of trefwoorden, is een andere markup geschikt: de definitielijst. Zie R-pd.3.14: Gebruik het dl (definition list), het dt (definition term) en dd (definition data) element voor het aangeven van een lijst met definities.

Voorbeelden

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>
```

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>
```

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>
```

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>
```
```
...
```

Links en referenties

Aan de slag: Beschrijvende markup

Gerelateerde richtlijnen

R-pd.3.14: Gebruik het dl (definition list), het dt (definition term) en dd (definition data) element voor het aangeven van een lijst met definities.
R-pd.2.9: Bouw een website volgens de Web Content Accessibility Guidelines (WCAG 1.0) van het W3C.

Bijbehorende ijkpunten normdocument

IJkpunt 3.6: Maak lijsten en lijstelementen op de juiste manier op.