Semantiek

Wat heeft dat te maken met semantiek? Laten we eerst eens kijken wat semantiek betekent. Volgens de Dikke van Dale:

Kort gezegd vertelt semantiek je wat dingen betekenen. Dit komt niet alleen voor in programmeren, maar overal om je heen, als je erover nadenkt.

Als ik ‘kast’ zeg, bedoel ik iets waar je spullen in stopt. Maar waarom denk je bij het woord ‘kast’ meteen daaraan? Omdat er waarde in dat woord zit. Het woord ‘kast’ refereert expliciet naar iets waar je spullen in kan stoppen.

Precies dat is er ook in HTML. Het table element refereert expliciet naar een tabel, een li element naar een list item, en een p element naar een paragraaf. Dat is gewoon de waarde, de boodschap, die je meegeeft aan dat element.

Wat belangrijk is even te vermelden is dat semantiek geen verplichting is. Wil jij jouw website met tabellen opbouwen, prima. Maar het heeft een paar belangrijke voordelen:

1) Het vergroot de leesbaarheid van je code. Je code is later veel makkelijker terug te lezen en aan te passen, en ook andere programmeurs zullen je website beter begrijpen.
2) De browser (en daarmee ook zoekmachines) begrijpen je website beter. Je zult hierdoor veel beter op het internet te vinden zijn.
3) Je hoeft minder CSS te gebruiken, omdat er al standaard CSS wordt toegevoegd die te maken heeft met de betekenis van een element.

Maar hoe gebruik je dat nu in de praktijk? Daar hebben we een aantal voorbeelden voor. Die laten je zien hoe je semantiek toepast op je website, met een aantal veel voorkomende voorbeelden.

Er zijn in HTML tegenwoordig heel veel elementen. Er zit er vast eentje tussen die precies uitdrukt wat je bedoelt. Om erachter te komen wat nou de betekenis is van zo’n element hebben de makers van HTML een hele uitgebreide documentatie gemaakt. Deze heet de HTML5 specificaties (vaak afgekort tot HTML5specs) en is hier te vinden: http://www.w3.org/TR/html5/ Je zult in de rest van de tutorial vast wel een paar keer naar deze site verwezen worden, want dit is de bron voor elke HTML developer!

« Lees de omschrijving en reacties