CSS en semantische HTML
Het wereldwijde web veranderd continu en als webmaster zul je mee moeten veranderen. een van de belangrijkste veranderingen van de laatste jaren is het gebruik van CSS in combinatie met semantische markup. CSS en semantisch webdesign hebben een aantal voordelen, duidelijke, heldere code, compatible met andere webapparaten, scheiding van inhoud en presentatie, minder gebruik van bandbreedte en betere toegang tot zoekmachines.
Tabellen voor tabular data
Vroeger maakten we websites met tabellen.
We gebruikten tabellen om dingen te doen waar ze nooit voor bedoeld waren. De
’table-tag’ was gemaakt om ’tabular data’ weer te geven. Niet om te gebruiken om de layout van een website mee op te maken.
Maar helaas was er geen beter alternatief voorhanden, dus we bleven tabellen gebruiken. Dit zorgde wel voor inefficiente, langzaam ladende
sites met moeilijk te lezen code.
Wikipedia geeft semantiek voor het web als volgt weer:
“Het uitdrukken van informatie op het internet op zulk een manier dat niet alleen mensen er mee kunnen omgaan, verwerken, linken ed.,
maar dat dit ook softwarematig gaat.”
CSS voor allerlei mobiele toepassingen
Tegenwoordig maken hippe designers fraaie, aan standaarden onderworpen sites met behulp van CSS.
Deze CSS layouts
kunnen met alle gemak ook worden bekeken op mobiele telefoons, PDA’s en televisies. Ze blijven werken als de standaarden
maar worden aangehouden.
Inhoud en presentatie scheiden
Maar het belangrijkste is wel dat wanneer je sites met CSS ontwerpt, je inhoud en presentatie kunt scheiden.
Wanneer je een site bekeken hebt die is opgemaakt met tabellen dan vraag je je waarschijnlijk af wat er allemaal aan de hand is.
Openings tabellen, sluiten van tabellen en tabelrijen, gemixt met de inhoud en de plaatjes.
Met schone CSS-gebaseerde html kun je websites maken die gemakkelijk te zijn begrijpen wanneer je de broncode bekijkt, en dus
ook gemakkelijker te onderhouden en bij te houden. Neem bijvoorbeeld de site
www.nieuwsbank.nl, niets ten nadele van de site, maar wel van de code. Kijk maar eens naar de opbouw van de code en vergelijk die
met de code van html-site zelf. De eerste site (nieuwsbank) worstelt zich door een rij aan tabellen en dergelijke heen, terwijl
html-site is opgebouwd uit divisions die allemaal een ‘min of meer’ logische naam hebben.
Minder dataverkeer
Als je een site hebt met een groot aantal bezoekers kun je je bandbreedte aanmerkelijk verminderen door van tabellen layout
over te stappen naar CSS-layout. Wanneer niet alle code geladen moet worden om al die ruimte-gifjes en tabellen door te lopen, dan
verbruik je dus minder data.
Voordelen voor zoekmachines
Wanneer een zoekmachine een site doorloopt die begint met allemaal niet ter zaken doende data, dan zal deze op een gegeven moment
de site als ‘niet interessant’ afdoen en minder snel terugkomen. Wanneer de spider daarentegen een site doorloopt die eenvoudig is van opmaak
en de presentatie van de inhoud heeft gescheiden, dan zal deze site dus beter scoren. Al met al is CSS en semantiek een groot voordeel wanneer
je je site wilt optimaliseren voor zoekmachines (SEO).
Overstappen dus!
Al met al genoeg redenen om over te stappen, of te starten met een correct geschreven website. Binnenkort volgt er, voor beginners, een
artikel waarbij we vanaf de basis vertellen hoe je een website maakt die semantisch correct en CSS proof geschreven is.
