Semantische lijstjes in HTML

Geschreven door: op vrijdag 27 december 2019

Leestijd:

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

  • Tabellen in HTML

    Geschreven door: op maandag 30 december 2019

    Met UL, OL en LI maak je opsommingen. Met DL, DT en DD maak je lijsten van definities. Naast opsommingen en definities is er ook nog tabulaire data: gegevens die in een tabel staan, waarbij je rijen h ...

    Bekijk het artikel »
  • SQL en het gebruik van For XML: Explicit en Path

    Geschreven door: op maandag 30 december 2019

    In mijn vorige blog hebben we For XML Raw en For XML Auto besproken. In deze blog zullen we For XML Explicit en For XML Path doornemen. Hieronder eerst wat uitleg over beide:EXPLICIT: Met ...

    Bekijk het artikel »
  • UX audit: heatmaps

    Geschreven door: op maandag 30 december 2019

    Een UX audit kun je uitvoeren op een digitaal product met als doel er achter te komen waar gebruikers van het product tegenaan lopen in het gebruik van bijvoorbeeld uw site. Door een UX audit te laten ...

    Bekijk het artikel »
Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Onze Middelen en Technologieën
microsoft silver partner
Adobe partner
fd-gazellen-2018.jpg
Google analytics
partners-logo.jpg
Op de hoogte blijven?

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