Semantisch correcte HTML

Geschreven door: op vrijdag 28 juni 2019

Leestijd:

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

  • SQL: Geclusterde en niet-geclusterde index

    Geschreven door: op zondag 30 juni 2019

    Het kan soms voorkomen dat het veel tijd kost voordat een bepaalde query resultaten teruggeeft. Dit kan liggen aan een scala aan problemen, zoals het gebruik van veel joins. Wat de query kan helpen ve ...

    Bekijk het artikel »
  • Hoe werkt OAuth 2.0

    Geschreven door: op zondag 30 juni 2019

    In de huidige samenleving is iedereen bijna altijd online, zo ook de applicaties waarvan de mensen gebruik maken. Als je jouw applicatie niet goed afschermt, kan dit allemaal veiligheidsrisico’s met z ...

    Bekijk het artikel »
  • OAuth 2.0: JWT token en claims

    Geschreven door: op zondag 30 juni 2019

    In mijn vorige blog heb ik uitgelegd hoe OAuth 2.0 ervoor kan zorgen dat derde partijen op een veilige manier gebruik kunnen maken van jouw applicatie met behulp van tokens. In deze blog gaan we wat m ...

    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