Semantische lijstjes in HTML header image

Semantische lijstjes in HTML

vrijdag 27 december 2019 ·Leestijd: 3 minuten
contacteer auteur:

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.


Andere blogartikelen

B2B E-commerce… Wakker worden!
Geschreven door
op dinsdag 28 juni 2022
Veel B2B-bedrijven in blijven hangen in; nauwelijks vindbare, verouderde B2B e-commerce websites met minimale conversiemogelijkheden en een betreurenswaardige gebruikerservaring. Zonde!
B2B Leadgeneratie: Alles wat je altijd al wilde weten!
Geschreven door
op maandag 27 juni 2022
B2B online leadgeneratie is het proces van het identificeren van de ideale klanten voor uw product of dienst, en hen vervolgens overhalen tot aankoop. Het is een essentiële activiteit voor B2B sales- en marketingteams.
Wat maakt een B2B webshop succesvol?
Geschreven door
op zondag 26 juni 2022
De opmars van de B2B webshop neemt toe. Regelmatig krijgen wij de vraag of er een groot verschil is tussen een consumentgerichte webshop en een puur B2B gedreven webshop. In deze blog leggen wij u uit hoe een B2B webshop succesvol kan zijn en worden.
Open Nieuwsbrief Inschrijving Footer

E-book

Zo wordt uw website een lead generator 
In 3 stappen uw website van visitekaartje naar salesfunnel

Download het E-book â€º