Joomla! Documentation™

Semantische HTML

Wat is semantische HTML?

Semantische HTML is een manier om HTML code te gebruiken om de structuur van een pagina op te bouwen of te verbeteren. Met andere woorden, het is een manier om met gebruik van HTML opmaak - classen, divs, tags enzovoort - de daadwerkelijke worden en bronnen van een pagina aan te vullen.Dit helpt 'bots' en bezoekers die schermlezers gebruiken om de structuur en de context van de informatie op de pagina te begrijpen, samen met het belang ervan, de relevantie en hoe het verband houdt met andere bronnen.

Hoe gebruik je semantische HTML code

Het is belangrijk om enige kennis te hebben van Semantische HTML als u websites ontwikkelt of inhoud ervoor schrijft, aangezien u de structurele markering regelmatig moet gebruiken.

Een voorbeeld van het verkeerd gebruiken van Semantische opmaak zie je wanneer een artikel geschreven in in gewone tekst en de schrijver op een bepaald moment een zin extra wil benadrukken. De schrijver vindt de opmaak van de H1 tag mooi, dus past hij deze toe op de zin die hij er 'mooi uit wil laten zien'. Dit is helaas nogal verwarrend voor een zoek machine 'bot' en de gebruikers van schermlezers want hen wordt verteld dat dit de belangrijkste titel is op de pagina, in plaats van een benadrukte of belangrijke tekst.

Semantische HTML opmaak moet alleen gebruikt worden om structuur aan een pagina toe te voegen - en niet om het uiterlijk van een element te veranderen (dit wordt gedaan met Cascading Style Sheets (CSS) of in-line opmaak).

Een voorbeeld van Semantische HTML opmaak

Laten we zeggen dat we als voorbeeld dit artikel nemen:

<h1>Gebruik van kopjes</h1>
Dit is een artikel over het belang van kopjes

<h2>Waarom gebruik je kopjes?</h2>
Het is belangrijk kopjes te gebruiken zodat zoekmachien bots kunnen zien wat een  <strong>belangrijk</strong> onderdeel van je artikel is.

<h3>Type kopjes</h3>
U kunt bepaalde type kopjes gebruiken, maar deze moeten geordend en gestructureerd worden binnen de pagina. Een H1 is de pagina titel en H2 wordt gebruikt voor sub-kopjes in de pagina. Kopjes binnen de sub-kopjes zoals H3, H4 en H5 moeten hiërarchisch gebruikt worden.

<h2>Is het moeilijk om kopjes te gebruiken?</h2>
Het is heel makkelijk om kopjes te gebruiken, kies gewoon de juiste HTML code.

<h3>Het gebruik van kopjes op dynamische pagina's</h3>
Op een dynamische pagina sluit je je belangrijkste kop gewoon in een H1 (bijvoorbeeld de titel van een Categorie lijst pagina is een H1) en plaats alle overige kopjes in een H2.

Hier ziet een zoekmachine 'bot' duidelijk de structuur - h1, h2, h3 - maar als we deze titels alleen vet zouden maken en het lettertype zouden vergroten, is het veel moeilijker de structuur te herkennen. Het woord 'belangrijk' wordt nu ook herkend als een benadrukt woord, iets dat belangrijk is binnen de pagina.

Semantiche HTML is ook

• Makkelijker te lezen (in de code)
• Makkelijker voor toegankelijkheidsdoeleinden - schermlezers functioneren ongeveer hetzelfde als zoekmachine bots om belangrijke kopjes te vinden
• Potentieel beter voor zoekmachine optimalisatie

In het voorbeeld hieronder, van een Google zoekresultaten pagina, ziet u hoe kopjes gebruikt worden door Google om kleinere links binnen dezelfde pagina aan te geven die mogelijk interessant zijn voor degene die op een bepaalde zoekterm zoekt (weergegeven in kleine blauwe hyperlinks onder de omschrijving) - een andere reden om de content goed te structureren.

Microdata

Microdata is een meer geavanceerde vorm van Semantische HTML opmaak die het mogelijk maakt nog meer contextuele informatie te geven over de content en structuur van uw website - voor meer informatie zie Microdata.

Wikipedia artikel over Semantiche HTML