Semantische lijstjes in HTML

Geschreven door: op vrijdag 27 december 2019

Leestijd: 3 minuten

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 SEO en Geoptimaliseerde Afbeeldingen

    Geschreven door: op woensdag 12 augustus 2020

    In een tijd waarin 27% van het koopproces van B2B kopers met eigen online research wordt doorgebracht is het essentieel om een goed vindbare website te hebben. Afbeeldingen kunnen, indien geoptimalise ...

    Bekijk het artikel »
  • Prospects zoeken B2B

    Geschreven door: op woensdag 12 augustus 2020

    Het zoeken van B2B prospects is een uitdaging voor elk bedrijf. Met name kwalitatieve B2B prospects.Door vooraf onderzoek te doen naar bedrijven die voldoen aan je criteria en je marketing hierop aan ...

    Bekijk het artikel »
  • Succesvolle B2B Marketing met deze 5 Tools

    Geschreven door: op woensdag 12 augustus 2020

    Zoals mooi gevisualiseerd in het filmpje ‘The Man in the Chair’. De fundamenten onder marketing veranderen niet, de technologieën en bijbehorende tools wel. Lees hier 5 tools die wij inzetten om B2B M ...

    Bekijk het artikel »
Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Allrig is de alles in een leverancier binnen de energie-industrie
AOC is een toonaangevend wereldwijd bedrijf actief in de verkoop van kwaliteitsharsen
ERIKS is een toonaangevende en innovatieve leverancier aan de procesindustrie en aan machinebouwers, die zowel de rol van specialist als die van brede MRO-leverancier vervult
Industrieel dienstverlener Heinen & Hopman Engineering uit Bunschoten is dé wereldwijde specialist op het gebied van klimaatbeheersing
Handicare is een internationale organisatie die ouderen helpt om hun dagelijks leven gemakkelijker te maken door het produceren van hoogwaardige trapliften
Op de hoogte blijven?

Meld u aan voor de gratis nieuwsbrief om op de hoogte te blijven van onze activiteiten