Semantisch correcte HTML header image

Semantisch correcte HTML

vrijdag 28 juni 2019 ·Leestijd: 3 minuten
contacteer auteur:

Wil je dat je website goed gevonden wordt? Dat alle bezoekers van je website optimaal gebruik ervan kunnen maken? Wil je als ontwikkelaar dat het onderhoud van je website eenvoudiger is? Maak dan gebruik van semantisch correcte HTML.

Semantisch correcte HTML is belangrijk om met name de volgende redenen:

  1. Vindbaarheid
  2. Toegankelijkheid
  3. Onderhoudbaarheid
  4. Toekomstgericht

Vindbaarheid

Zoekmachines struinen het web af naar content om te kunnen indexeren. Wanneer een zoekmachine op jouw website terecht komt, zal het zoveel mogelijk relevante informatie willen vergaren en deze gebruiksvriendelijk kunnen toepassen en tonen aan de gebruiker. Als de HTML-broncode van de webpagina semantisch correct is, herkent de crawler van de zoekmachine het type inhoud en kan het daarmee beter indexeren.

Een zoekmachine zal een NAV-element herkennen en ervan uitgaan dat hier niet de relevante content van de pagina in staat, maar slechts navigatie bedoeld om door de website te bladeren. Een P-element, misschien zelfs het liefst in een ARTICLE-element, geeft een paragraaf aan en zal vermoedelijk inhoudelijke tekst bevatten. Maar tekst in een DIV? Wie weet
 Maar de zoekmachine heeft absoluut geen reden om te veronderstellen dat het relevante, inhoudelijke content is.

Toegankelijkheid

Niet alle gebruikers van het World Wide Web hebben een “normale” browser op de desktop of mobiel of tablet. Sommigen hebben een browser die de tekst hardop voorleest of omzet naar braille. Het kan ook voorkomen dat mensen geen muis of touchscreen gebruiken om te navigeren, maar een toetsenbord of een ander apparaat. In zulke gevallen is het belangrijk dat het apparaat begrijpt wat de intentie is van elementen op de pagina.

Een formulier kan verzonden worden met een BUTTON met type submit. Dit begrijpt elk apparaat en een apparaat zal daarop zijn ingesteld. Als je echter een formulier pas (en alleen) kan verzenden door op een link te klikken die een POST doet naar een controller, dan is de kans groot dat veel gebruikers met aangepaste apparaten het formulier niet kunnen verzenden.

Als de content van een website hardop wordt voorgelezen door een apparaat, dan is het belangrijk dat de navigatie in NAV staat, zodat deze, wanneer gewenst, meteen overgeslagen kan worden, zodat alleen de inhoud van de pagina voorgelezen wordt.

Onderhoudbaarheid

Als ik een verwijzing naar een andere pagina wil maken, dan hoef ik daar maar Ă©Ă©n element voor te gebruiken: A met href. Dit element is hiervoor gemaakt en meer is niet nodig. Dit element zal altijd het gewenste resultaat hebben: verwijzen. Ik kan hetzelfde effect krijgen met, zeg, een P en een onclick-event erop, maar ik zou dan overbodig werk verrichten en extra complexiteit toevoegen (Ă©n bestaande functionaliteit, zoals het aangeven van reeds bezochte verwijzingen niet zonder extra toevoegingen kunnen gebruiken). Let op: dat “zelfde effect” zou niet gelden voor aangepaste browsers, zie onder kopje Toegankelijkheid.

Mijn collega weet ook dat een A(nchor) een verwijzing is en is bekend met het doel en de werking ervan. Zodoende kan zij bestaande code gemakkelijk onderhouden en uitbreiden. Als zij een bepaald element in ASIDE zet, dan weet ik dat het niet hoort bij de hoofdcontent van de pagina en kan daar zonder al te veel vragen mee verder.

Toekomstgericht

Een BUTTON is een BUTTON, een A is een A. NAV zal gelden voor navigatie en dat zal niet veranderen. Het kan gebeuren dat er elementen uit de specificaties verdwijnen of toegevoegd worden, maar wanneer er een nieuwe type apparaat komt, bijvoorbeeld een smartwatch of een magnetron met ingebouwde browser, dan is de bedoeling en de werking van elementen duidelijk als je gebruik maakt van semantisch correcte HTML. Dit scheelt tijd en werk.

Meer informatie

Er is zoveel informatie te vinden over semantisch correcte HTML, dat kan moeilijk allemaal opgesomd worden, maar een goede eerste stap maar ook naslagwerk is de HTML-specificatie van het W3C. Hierin vind je alle elementen beschreven – het zijn er niet heel veel- en voorbeelden van hoe ze te gebruiken: https://www.w3.org/TR/html52/dom.html#elements.

Een beknopter overzicht vind je bij MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element.

 


Andere blogartikelen

Integraties met API's van verschillende partijen
Geschreven door
op donderdag 30 juni 2022
Bij Sigma Solutions maken wij integraties met verschillende partijen, die ervoor zorgen dat jouw bedrijfsproces geautomatiseerd en gedigitaliseerd kan worden. We zijn constant op zoek naar passende oplossingen voor onze klanten.
Wat is B2B Online Advertising?
Geschreven door
op donderdag 30 juni 2022
B2B Online Advertising is een marketingstrategie die bedoeld is om een zakelijke boodschap over te brengen aan andere bedrijven door middel van advertenties.
Als traditioneel bedrijf succesvol blijven in een tijdperk van digitalisering
Geschreven door
op donderdag 30 juni 2022
Wil je als traditioneel bedrijf succesvol blijven in een tijdperk van 'digital natives'? Lees dan deze blogpost!
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 â€ș