Semantische html (Webdevelopment)

Semantische html betreft geen nieuwe html-versie, maar is een manier waarop html toegepast kan en zou moeten worden. Door html semantisch op te maken, beschrijf je als het ware de contentdelen door de juiste html-elementen te gebruiken en dus wordt het een bepaalde relevantie meegegeven.

Voordelen van semantische html

De voordelen van semantische html zijn uiteenlopend. Het toepassen van semantische html is bevorderlijk voor:
  1. de laadtijd, er is minder code nodig omdat er enkel html elementen gebruikt worden om de content te beschrijven, uiteindelijk zorgt dit ook voor minder dataverkeer;
  2. de flexibiliteit, omdat html elementen enkel zijn gebruikt waar het nodig is en er geen overbodige markup aanwezig is, zullen eventuele aanpassingen minder arbeidsintensief zijn. Ook is het eenvoudiger in te spelen op toekomstige standaarden;
  3. de toegankelijkheid, screenreaders en andere alternatieve browsers kunnen beter overweg met semantisch opgemaakte html-documenten maar ook kom je mobiele surfers tegemoet, er wordt dus een breder doelgroep bereikt wat eventueel weer kan resulteren in een hogere omzet afhankelijk van het doel van de website;
  4. de indexeerbaarheid, juist weer doordat er weinig code is gebruikt. Spiders zullen beter in staat zijn semantische webpagina's te indexeren. Een spider ziet namelijk geen opmaak en is dan ook niet in staat daaruit het belang van woorden, zinnen of teksten te halen. Door html semantisch toe te passen, geef je ze de juiste waarde die ook door spiders herkend zullen worden.

Nadelen van semantische html

Het enige nadeel van semantische html is dat de juiste denk- en werkwijze ontwikkeld moet worden. Ook is er een goede kennis van CSS nodig, opmaak behoort namelijk niet in de html documenten zelf maar zou, middels een stylesheet, volledig gescheiden moeten zijn van de content.

De denk- en werkwijze

Semantische html is zeker niet hetzelfde als validerende html. Html documenten waarbij de semantiek ver te zoeken is, kunnen namelijk ook valideren. Het komt namelijk voor dat elke nieuwe menu-item, die met behulp van een a-element klikbaar zijn gemaakt, in een div wordt gezet. Een menu zou echter anders benaderd moeten worden, een menu is niets meer dan een opsomming van keuzemogelijkheden; het is een lijst en dus zou hiervoor een (un)ordered list gebruikt moeten worden. Met behulp van CSS kan het dan op een gewenste manier opgemaakt worden.

Andere html elementen die de content beschrijven zijn strong en em om nadruk te leggen op een woord of zin, p om een paragraaf te maken, address om adresgegevens aan te geven, h1 tot en met h6 om koppen en subkoppen aan te geven, ol en ul om genummerde en niet genummerde opsommingen te maken, dl (definition list) om bijvoorbeeld relaties te leggen tussen een woord en een uitleg.

Onder anderen aan de header tags zal aandacht besteed moeten worden. Een h1 zou bijvoorbeeld maar eenmaal voor mogen komen en zou gebruikt moeten worden voor de titel van de pagina. Vervolgens kunnen h2 elementen gebruikt worden voor ondergeschikte koppen, subkoppen dus. Hetzelfde geldt vervolgens voor h3 tot en met h6.

Een goede manier om te testen of een html document semantisch is opgezet, is door alle opmaak weg te halen (stylesheets en javascripts uitschakelen). Alles zal dan onder elkaar getoond worden, alhoewel dit er simpel en kaal uit zal zien is dit juist wel wat het W3C aanraadt. De belangrijkheid en relevantie van bepaalde woorden, zinnen of teksten zou er dan nog uit te halen moeten zijn, elementen krijgen uit zichzelf een standaard opmaak mee met als gevolg dat een h1 groter is dan een h2. Op zo een manier zullen ook spiders een webpagina benaderen, waarbij de broncode ook van boven naar onderen wordt gespiderd.

Gerelateerde woorden

Thema & categorieën