Semantisch HTML - codering & markup 's - Semantiek
Minstens zo belangrijk als de opbouw en de layout van een website is de manier waarop uw webpagina's \(sem\antisch) gecodeerd zijn.
Indexering van een website door zoekrobots kan alleen kans van slagen hebben indien de zoekrobots uw pagina's begrijpen. Semantisch HTML zorgt ervoor dat je code overzichtelijk blijft voor uw belangrijkste bezoeker, Google.
Wat betekent semantiek
"De semantiek of betekenisleer is de wetenschap die zich bezig houdt met de betekenis van taalkundige constructies zoals woorden (woordsemantiek) en zinnen (zinssemantiek). De studie van de betekenis van tekens en symbolen is een verwante wetenschap: de semiotiek, binnen de semiotiek wordt semantiek ook wel aangeduid als 'semasiologie."
Bron:
http://nl.wikipedia.org/wiki/Semantiek
http://nl.wikipedia.org/wiki/Semantisch_Web
Opmaak html coderen & markup 's
Het is om te beginnen aan te raden een website te bouwen op basis van div tags in plaats van old-school html tabellen. Deze tabellen hebben namelijk als nadeel dat er veel meer code voor de opmaak in de broncode nodig is hetgeen het voor zoekmachines onoverzichtelijker maakt.
Bijvoorbeeld:test
Zoals je ziet is dit redelijk veel code voor 1 blokje met een rode achtergrond.
Beter is het om een div te gebruiken in combinatie met CSS (Cascading Style Sheets) voor de opmaak:
In dit simpele voorbeeld blijkt al dat je de hoeveelheid codering significant kan beperken en zodoende de codering "schoner" kan houden voor zoekmachines.
Waar het in de semantiek op het gebied van websites omgaat is het begrijpbaar maken van je codering voor zoekmachines. Belangrijk zijn dan ook de markup's die je plaats om je blokken tekst. Door middel van de markup's h1, h2 en p geef je een importantiegehalte aan de inhoud van uw teksten waarbij h1 belangrijker is dan h2 en die op zijn beurt weer belangrijker dan p. Het is dan ook van groot belang om de zoekargumenten waarop u gevonden wilt worden terug te laten komen in de h1 en h2 markup's.
Voorbeeld semantisch html:
Koptekst
inleiding
alinea/paragraaf
Layout technisch is de h1 tag visueel niet de aantrekkelijkste, echter kunt u de markup's met behulp van CSS (Cascading Style Sheets) styleren.
Voordelen van semantiek:
- het maakt uw site toegankelijker voor meerdere browsers en een grotere doelgroep (bijv. mobiele surfers)
- uw pagina's laden sneller doordat er minder codering nodig is om uw pagina te styleren.
- door de beperkte aanwezigheid van minder codes zullen zoekmachines uw pagina's beter en sneller begrijpen.
CSS Cascading Style Sheets
In dit artikel is de naam CSS al meerdere keren teruggekomen. Een cascading style sheet wordt gebruikt om de lay-out te bepalen voor een website. CSS code kan op 2 manieren gebruikt worden. In de head sectie van een webpagina of als extern document. Voordeel van dat laatste is dat je niet elke webpagina apart hoeft te wijzigen. In de stylesheet wordt o.a. gedefinieerd het lettertype (bijv. Arial), de grootte van het lettertype, de kleur, alle markup's ( H1, H2, p, etc.), lay-out van andere html tags zoals body, table, td, hr, etc. Door het gebruik van een stylesheet houdt u de code van een webpagina zo schoon mogelijk en derhalve makkelijk leesbaar voor zoekmachine's.http://www.w3schools.com/css/