Semantische HTML: code met betekenis

Het is de afgelopen jaren een van de sterkst opkomende ideeën van het web: semantische HTML. Het is een van de sterkste concepten rondom het bouwen van websites, en een concept waar ik erg in geloof. Semantische HTML heeft een aantal doelen, het belangrijkste doel is het stijlen van code en content.

Met gebruik van CSS, ofwel Cascading Style Sheets, kan een webdesigner makkelijk op basis van goed gestructureerde HTML layout en design aan een pagina toevoegen. Door dit goed te doen zit alle design in de CSS, en bevat de HTML slechts de inhoud, en geen presentatie opmaak. Dit maakt het makkelijker voor andersoortige browsers en ook zoekmachines om de content van een pagina te downloaden en te begrijpen.

U kunt het zien als een Word document met opmaak profielen, maar zonder opmaak: de volledige structuur is af te lezen uit de code. Dit is erg gunstig voor zoekmachines aangezien die op deze manier goed kunnen begrijpen waar een tekst over gaat.

Hoe ziet semantische HTML er dan uit?

Wat vooral erg belangrijk is: semantisch HTML is simpel en netjes, en gebruikt liefst zo min mogelijk HTML. Bovendien gebruikt het de juiste code voor de juiste onderdelen van een pagina: een artikel titel zit in een heading 1, ofwel <h1> tag, subkoppen in een <h2>, paragrafen in een <p> tag.

Microformats

Er is nog meer dan dat: het principe van betekenis toevoegen aan de code met semantische HTML is nog verder doorgevoerd in een serie standaarden die bekend staan als microformats. Dit zijn kleine blokjes code waarmee bijvoorbeeld een adres, een CV of een review op een voor een computer leesbare manier worden gepresenteerd.

Zoekmachines gebruiken die data uit microformats om beter te onderscheiden wat er op een pagina staat, en sommige web browsers gebruiken die data ook al om bijvoorbeeld van een contact pagina met het hCard microformat in één keer de data op te slaan in uw adressenbestand.