Als je de structuur van je HTML-documenten zorgvuldig plant, kun je dat help computers betekenis te geven aan uw inhoud. Een goede syntaxis is zeker belangrijk, maar biedt in feite alleen parsers, zoekmachines en ondersteunende techologieën met een betekenisloze hoeveelheid gegevens.
Als u uw front-endworkflow verbetert door aandacht te besteden aan semantiek, kunt u inhoud van hogere kwaliteit maken die meer bezoekers trekt. Semantics is de studie van betekenis, in een bredere context is dat zo een tak van logica en taalkunde.
In de wereld van webontwikkeling praten we over semantische inhoud wanneer computers de structuur van een document begrijpen, en de rollen van de elementen erin. Als we de juiste semantiek willen creëren, moeten we dat diepgaand doen begrijp de structuur van onze inhoud en de mogelijkheden van frontend-technologieën.
Dus wat zijn de tastbare voordelen? Goede semantiek betekent a meer doorzoekbare inhoud dat leidt tot een betere zoekmachine ranking. We vergroten ook de toegankelijkheid, zoals ondersteunende technologieën zoals schermlezers kunnen de betekenis van onze inhoud beter interpreteren.
Er zijn veel verschillende front-end ontwikkelingstechnieken waarmee ontwikkelaars een semantische paginastructuur kunnen realiseren. Dit bericht geeft u een korte introductie van semantische HTML-tags en het concept van de documentomtrek.
Semantische en niet-semantische HTML-tags
Het concept van semantiek is niet zo nieuw als het lijkt, het bestond al lang vóór het tijdperk van HTML5. De term semantisch web werd al in 2001 bedacht door Sir Tim Berners-Lee. Onder “semantisch web” hij bedoelde een web van gegevens dat door machines kan worden verwerkt.
Dit betekent in de eerste plaats dat afzonderlijke HTML-elementen moeten hun onderscheiden structurele rollen hebben. Volgens de definitie van W3C “een semantisch element beschrijft duidelijk de betekenis ervan voor zowel de browser als de ontwikkelaar”.
Semantische elementen vóór HTML5
Semantische elementen bestonden ook vóór HTML5, maar in de meeste gevallen wisten ontwikkelaars dat niet sommige van de tags die ze gebruikten waren eigenlijk semantisch. Denk maar aan de
of de labels.
Hun rollen zijn duidelijk voor ons en de user-agent:
