Gebruik de juiste HTML-elementen voor de structuur van een webpagina en voor benadrukte of speciale tekst

Webpagina’s zijn geschreven in HTML. Deze taal bestaat uit elementen. Dat zijn stukjes code waarmee delen van de pagina worden aangegeven, bijvoorbeeld: een kop, een tabel, een lijst. Gebruik de elementen waarvoor ze bedoeld zijn.

Hoe pas ik dit toe?

Als er een HTML-element is dat de betekenis heeft die je wilt overdragen, moet je dat specifieke HTML-element gebruiken. Dit wordt wel ‘semantische markup’ genoemd. Er zijn HTML-elementen waarmee je de structuur van een pagina kunt aangeven, bijvoorbeeld: secties, navigatiemenu’s, paragrafen. Daarnaast zijn er ook elementen die je kunt gebruiken om betekenis te geven aan stukjes tekst. Bijvoorbeeld om een woord of zinsdeel te benadrukken.

Een goede editor heeft knoppen waarmee een redacteur de juiste HTML-elementen kan invoegen voor bijvoorbeeld een tabel of een benadrukte tekst (vetgedrukt).

Voorbeelden

Semantische HTML-elementen

Voorbeelden van semantische elementen:

  • <form> (formulier)
  • <table> (tabel)
  • <img> (afbeelding)
  • <header> en <footer> (‘bovenkant’ en ‘onderkant’ van een webpagina)
  •  <em> en <strong> (nadruk)
  • <blockquote> (citaat)
  • <ul> en <ol> (bulletlijst en genummerde lijst)

Let op: welke elementen je kunt gebruiken hangt af van de versie van HTML die op de website wordt gebruikt.

De volgende elementen zijn niet semantisch. Deze elementen zeggen niets over de inhoud ervan. Je kunt ze het beste alleen gebruiken als er geen semantisch element van toepassing is.

  • <div>
  • <span>

Een kop boven een tekst

Bovenaan een nieuwsbericht staat een titel. Deze titel is weergegeven in een groter formaat en vetgedrukt. Ook heeft de titel een andere kleur dan de rest van de tekst.

  • Goed: de titel staat in een header-element (<h1>, <h2>, enzovoorts).
  • Fout: de titel staat in een paragraaf-element met een class-attribuut (<p class=”titel”>).

Hoe draagt dit bij aan een betere website?

Door semantische HTML te gebruiken maak je je website toegankelijker en beter vindbaar in zoekmachines. Dat komt doordat de betekenis van de verschillende onderdelen van de webpagina in de HTML-code zelf is vastgelegd. Daarmee is de vormgeving van die onderdelen geen bepalende factor meer: je hoeft de grootte, vorm of kleur niet te zien om te begrijpen dat het bijvoorbeeld om een kop gaat. Hulptechnologie kan die kop apart voorlezen aan een bezoeker. Zoekmachines kunnen de kop gebruiken om belangrijke  trefwoorden voor de pagina te bepalen. En als je de pagina zonder vormgeving (CSS) in een browser bekijkt, zie je nog steeds de basis-structuur.

Bouwer of redacteur?

De bouwer moet ervoor zorgen dat de editor in het CMS de mogelijkheid biedt om verschillende semantische elementen te gebruiken. De redacteur moet zorgen dat hij de functies van de editor gebruikt om bijvoorbeeld koppen, paragrafen, lijsten en tabellen in te voegen, zodat de juiste HTML-elementen worden toegepast.

Technische details

Hoort bij