Semantische lijstjes in HTML

In een eerder blogitem heb ik het al gehad over semantisch correcte HTML en dat dat goed is voor de toegankelijkheid en de vindbaarheid van je website.

Je wilt dat alle bezoekers van je website de informatie die erop staat op de juiste manier kunnen raadplegen en omdat sommige bezoekers een andere browser hebben dan een gewone browser die je vindt op je computer of op je mobiele telefoon, wil je ervoor zorgen dat je informatie zo gestructureerd is dat die browsers je data ook zo interpreteren dat het zinvol is. Het gaat in zulke gevallen dus niet om de opmaak of presentatie van de data, maar over wat de data daadwerkelijk is.

Hetzelfde geldt voor vindbaarheid (of SEO): opmaak of layout zegt een zoekmachine niet zoveel, wel informatie die op zo'n wijze op de website staat, dat de crawler weet om wat voor informatie gaat en de informatie zich verhoudt tot andere data op je website.

Semantische opsommingen

Ik wil in deze blog semantisch correcte lijstjes aanstippen. Op een webpagina kan je data op verschillende manier opsommen en presenteren en lijstjes zijn hiervan een bekend voorbeeld. Ik zeg lijstjes, maar bekender zal de term bullet points zijn. In HTML zijn er drie soorten lijsten:

• geordende of gesorteerde
• ongeordende
• definities

Geordende lijstjes

Geordende lijstes hebben een bepaalde volgorde, dus 1, dan 2, daarna 3. Of het kan zijn a, b, c, tot aan z. Hiervoor gebruik je in HTML de <ol>-tag:

<ol>
  <li>Eerste item</li>
  <li>Tweede item</li>
  <li>Derde item</li>
</ol>

Resultaat:

1. Eerste item
2. Tweede item
3. Derde item

<ol> staat voor ordered list en <li> voor list item. Alle user-agents en zoekmachines weten nu dat dit een geordende opsomming is, waarbij de volgorde van belang is, en zullen het zo behandelen of kúnnen behandelen. In de HTML heb ik niet aangegeven dat het 1, 2 en 3 moet zijn, dat bepaalt de browser zelf. Middels CSS kan ik aangeven dat er een andere manier van presentatie gebruikt moet worden (een andere manier van presenteren, niet een andere manier van opsommen):

<ol class="andere_opsomming">
  <li>Eerste item</li>
  <li>Tweede item</li>
  <li>Derde item</li>
</ol>

.andere_opsomming{
  list-style-type: lower-roman
}

Resultaat:

1. Eerste item
2. Tweede item
3. Derde item

Behalve het toevoegen van een classname, heb ik geen aanpassing gedaan aan de HTML, de data die ik wil doorgeven aan mijn bezoekers is hetzelfde gebleven, alleen de presentatie is anders (en kan zonder gevolgen genegeerd worden door browsers).

Ongeordende lijstjes

Lijstjes waarbij de volgorde niet van belang is, maak je met de <ul>-tag:

<ul>
  <li>Appels</li>
  <li>Beren</li>
  <li>Varanen</li>
</ul>

Resultaat:

• Appels
• Beren
• Varanen

Bij <ul> geldt hetzelfde als voor <ol>, als het gaat om presentatie. Je kan de verschillende vormen van data in één lijst gebruiken en zelfs de presentatie ervan laten verschillen, hoewel dit in praktijk niet zal gebeuren:

<ul class="combinatie_van_data_en_stijlen">
  <li>Appels</li>
  <li>Beren
    <ol>
      <li>De eerste beer</li>
      <li>De tweede beer</li> 
    </ol>
  </li>
  <li>Varanen</li>
</ul>

.combinatie_van_data_en_stijlen{
  list-style-type: square;
}

Resultaat:

• Appels
• Beren
  1. De eerste beer
  2. De tweede beer
• Varanen

Dit zijn eenvoudige opsommingen, waarbij gelaagdheid weliswaar is toegestaan, maar waar geen relaties worden gelegd. Om relaties te kunnen leggen binnen opsommingen of lijsten, maak je gebruik van definities en tabellen.