Semantisch correcte HTML
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:
- Vindbaarheid
- Toegankelijkheid
- Onderhoudbaarheid
- 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.
