2.2.2 Pagina's zijn semantisch gestructureerd

Gebruik de structuurelementen die HTML biedt voor het markeren van paragrafen (p), koppen (h1-h6) en lijsten (ul, ol, li). Het volstaat niet om visueel aan te duiden wat een kop of een lijst is.

Waarom?

Voordelen van structuurelementen voor webontwikkelaars:

• Positie in resultaatpagina's van zoekmachines wordt gunstig beïnvloed
• In combinatie met CSS is de vormgeving nauwkeuriger en onafhankelijk van de HTML-code aanpasbaar.
• HTML-code is compacter en overzichtelijk
• Basisopmaak is gegarandeerd in oude browsers en op mobiele apparaten

Dankzij structuurelementen kan een screenreader ook automatisch inhoudsopgaves samenstellen en lijsten met verschillende niveaus beter doorzoekbaar maken.

Semantisch gestructureerde pagina's passen zich ook beter aan aan persoonlijke stijlbladen. Met behulp daarvan kunnen slechtzienden de kleur, het lettertype, de grootte en de positie van verschillende tekst- en paginadelen nauwkeuriger bepalen.

Koppen

Voor de kop op het hoogste niveau gebruikt u het h1-element. Subkoppen geeft u aan met h2, en koppen op een derde of lager niveau met h3 tot h6. Respecteer steeds deze hiërarchie.

Voorbeeld (niet goed)

In dit slechte voorbeeld zijn de paginatitel en tussentitels opgemaakt met div-elementen. Door middel van een CSS-class krijgen ze visueel de layout van een kop, maar de semantiek ontbreekt.

Voorbeeld (goed)

In dit goede voorbeeld is de titel opgemaakt met h1 en de tussentitels zijn opgemaakt met h2's.

Lijsten

Voor lijsten gebruikt u ol (voor genummerde lijsten) of ul (voor lijsten met opsommingstekens). Combineren kan ook.

Voorbeeld (niet goed)

<p>
1. Home<br />
2. Aanbod<br />
   * Auto's<br />
   * Motorfietsen<br />
3. Contact
</p>

Voorbeeld (goed)

<ol>
  <li>Home</li>
  <li>Aanbod
    <ul>
      <li>Auto's</li>
      <li>Motorfietsen</li>
    </ul>
  </li>
  <li>Contact</li>
</ol>

Merk op dat het navigatiemenu van uw website ook een lijst is en dus ook met een ul moet worden opgemaakt, ook als het om een horizontaal menu gaat.

Aandachtspunten

• Gebruik geen lijst-elementen als er slechts 1 item is.
• Een broodkruimel hoeft u niet als een lijst te markeren. Een "groter dan teken" (>) als scheidingsteken geeft de hiërarchie tussen de links beter weer dan een ul.
• Sluit de lijst niet af na ieder lijstitem.

Voorbeeld (niet goed)

<ul>
<li>Home</li>
</ul>
<ul>
<li>Over ons</li>
</ul>
<ul>
<li>Onze producten</li>
</ul>
<ul>
<li>enz.</li>
</ul>

Voorbeeld (goed)

<ul>
<li>Home</li>
<li>Over ons</li>
<li>Onze producten</li>
<li>enz.</li>
</ul>

Opmerkingen

Als u niet tevreden bent met het standaarduitzicht van structuurelementen, dan kunt u dit eenvoudig aanpassen in het stijlblad. Als u bijvoorbeeld de kop op niveau 1 niet zo groot wilt tonen en niet vet, dan hoeft u daar geen speciale class voor te creëren:

h1 { font-size: 1.4em; font-weight: normal }

Misbruik structuurelementen niet om visuele effecten te bekomen. Als u een klein lettertype nodig heeft voor tekst die geen kop is, gebruik dan geen h5- of h6-element. Als u tekst wil laten inspringen, gebruik dan geen blockquote-element (tenzij het om een citaat gaat) of geneste lijsten.

Voorbeeld (niet goed)

<ul><ul><ul>
<li>Home</li>
<li>Over ons</li>
<li>Producten</li>
<li>Contact</li>
</ul></ul></ul>

Voorbeeld (goed)

.nav { margin-left: 20px; }

<ul class="nav">
<li>Home</li>
<li>Over ons</li>
<li>Producten</li>
<li>Contact</li>
</ul>