Webstandaarden, deel 1 – Wat is het en waarom moet ik ze gebruiken

Arjan Snaterse

24 december 2006

Het is al weer een tijd normaal: maak je website volgens de webstandaarden. De code wordt netter, het is beter voor de zoekmachines, je site wordt er ‘beter’ van, enzovoorts. Het klinkt allemaal leuk, maar hoe doe ik dat dan en is het dan echt nodig? In dit artikel wil ingaan op drie onderdelen:

  • Wat zijn webstandaarden en waarom gebruiken we ze?
  • Hoe pas ik ze toe?
  • Doctypes, wat moet ik ermee?

Wat zijn webstandaarden

W3C

Een term die hier moet vallen is het W3C, het World Wide Web Consortium. Deze club, opgericht door WWW uitvinder Tim Berners Lee, heeft als hoofdbezigheid het ontwikkelen van standaarden en richtlijnen voor web gerelateerd zaken, zoals (X)HTML, CSS, XML, SOAP etc.

Wat zijn dan die standaarden?

Het wordt teveel om alle standaarden hier in dit artikel uitgebreid te noemen, daarom noem ik er nu drie bij naam, waarvan ik er twee in dit artikel verder zal uitwerken; HTML (en daarbij XHTML) en CSS en DOM.

HyperText Markup Language (HTML) is dè taal voor webpagina’s. Hierin wordt de structuur van de pagina vast gelegd en zorgt deze ervoor dat de browser snapt wat je op je scherm tevoorschijn wilt toveren. Een zijtak hiervan is XHTML, ofwel Extensibile HyperText Markup Language. Deze taal is eigenlijk HTML, maar dan in een XML applicatie. In grote lijnen lijkt hij erg op zijn broertje, maar is wat strikter in gebruik vanwege de XML. Dit uit zich onder andere doordat overal de tags afgesloten moeten worden (lege elementen als bijv. een <br> tag moeten geschreven worden als
), overal lower case en alle attributen moeten “gequote” worden.

CSS, ofwel Cascading Style Sheets, is de manier waarmee je alle elementen op de goede positie zet en deze het juiste uiterlijk geeft. Nu ik deze zo apart noem, komen we meteen aan bij een belangrijke basis voor de webstandaarden: houdt de structuur (HTML) en het uiterlijk (CSS) gescheiden!

De Document Object Module (DOM) is de standaard voor scripttalen (waaronder Javascript) die op een webpagina uitgevoerd worden. Met deze standaard is het aanpassen van de structuur, inhoud en layout een stuk makkelijker geworden.

Deze laatste standaard laten we voor nu even links liggen. In dit artikel zal ik meer ingaan op de HTML en CSS.

Waarom webstandaarden?

De beargumentering voor het gebruik van webstandaarden zal ik hieronder weergeven in twee categorieën: voor de ontwikkelaar en voor de klant. Dit is m.i. best een nuttige onderverdeling, omdat ik merk dat er nogal vaak gedacht wordt vanuit het punt van de programmeur, terwijl dit niet altijd voordelen hoeft op te leveren voor de consument. Hoewel er denk ik in beide categorieën veel overlap zit, noem ik ze toch apart, omdat vaak het uitgangspunt anders is.

Voor de programmeur/ontwikkelaar

Browser onafhankelijk

Als men zich goed houdt aan de webstandaarden, is deze gefabriceerde code vrijwel browseronafhankelijk. Ik zeg ‘vrijwel’, omdat dit, vergeef me de woordspeling, nogal afhankelijk kan zijn van de browser. Niet elke browser ondersteunt de webstandaarden even goed, waardoor websites er nog wel eens anders uit kunnen zien. Toch betreffen het vaak minimale ‘hacks’ om het goed werkend te krijgen voor de meest gangbare browsers.

Onderhoud

De code zal aanzienlijk slinken als je je aan de ‘regeltjes’ houdt. Dit maakt het geheel niet alleen overzichtelijker, maar het scheelt ook behoorlijk in onderhoud. Geen gedoe meer met col- en rowspans en een andere programmeur uit je team zal zich een stuk sneller een weg weten te banen in je code, dan wanneer het bol staat van de tabellen.

Flexibel

Het maken van extra functionaliteit als printpagina’s is een stuk makkelijker; de structuur en inhoud van je pagina staat immers al in de HTML. Het enige wat je nog hoeft te doen is om in een apart CSS bestand datgene definiëren wat je graag op de printpagina wilt zien, eventueel met een ander lettertype, welke beter geschikt is voor drukwerk.

Ook het restylen van een site kost relatief veel minder tijd. Met de CSS en eventueel wat extra divs is het design van je site redelijk snel aangepast. Dit spaart je dus heel wat werk uit en daar zal je klant toch ook blij mee zijn. En hierbij zijn we aangekomen bij de argumenten voor de consument.

Voor de consument

Zoemachines

Een basisvereiste voor het goed gevonden kunnen worden, afgezien van de links naar je site, is goede, schone en vooral semantische code. Dit laatste wil zeggen dat de HTML tags worden gebruikt waarvoor ze bedoeld zijn. Zo worden de <hx> tags gebruikt voor headers, <p>tags voor paragrafen enzovoorts. Doordat de HTML (het gaat hier met name om de HTML, omdat zoekmachines niks aan het uiterlijk van een site hebben) goed gestructureerd is opgebouwd kunnen zoekmachines ook beter hun weg in de code vinden de data/informatie beter indexeren.

Accessibility

Met accessibility bedoel ik de mate waarmee een site goed bezocht kan worden door mensen met een handicap. Hierbij kun je denken aan screenreaders, braille-browsers of andere apparaten die hiervoor op de markt zijn. Dat ik dit punt nu noem onder het correct HTML, betekent echter niet dat gefabriceerde, goede semantisch code zomaar ook perfect toegankelijke code is. Je bent echter wel een eind op weg, omdat je code sowieso een stuk schonere (en dus duidelijk leesbaar door alternatieve browsers) is. Waar je allemaal op moet letten voor toegankelijke sites kun je lezen bij de richtlijnen van drempelsvrij.nl (opvolger van drempelsweg.nl).

Hoewel accessibility vaak genoemd wordt in verband met het bovengenoemd wil ik het toch ook graag noemen voor het gebruik van mobiele devices zoals PDA’s en mobiele telefoons. Maak voor de grap maar eens een site in tabellen en bekijk deze op een mobiele telefoon; het zal er niet heel prettig uit zien en je krijgt een lamme hand van het scrollen (zowel horizontaal als verticaal). Bij het correct gebruik van HTML zal de content echter netjes worden geschaald en hoef je alleen nog maar verticaal te scrollen. Overbodige dingen die je voor een PDA niet per se nodig hebt laat je netjes achterwege door simpelweg, net als bij print pagina’s, gebruik te maken van een andere stylesheet (d.m.v. het media=”handheld” attribuut in de tag). En omdat je code erg compact is, kost het je een stuk minder bandbreedte en dalen de uitgaven; je betaalt immers vaak per MB.

Kosten

Misschien wel het belangrijkste punt van de klant: hoeveel gaat dit mij kosten? Zoals ik al noemde bij de argumenten voor de programmeur, kost het een stuk minder tijd als je je code wilt updaten of zelfs de hele site wilt voorzien van een redesign. En minder tijd betekent dus minder geld.

Tot slot

Zoals je hebt gelezen zijn er nogal wat voordelen te noemen. Nu zal de criticus waarschijnlijk wel denken: “waar zijn de nadelen dan?”. Juist, datzelfde vraag ik me eigenlijk ook af, want ik kan ze moeilijk bedenken. Het enige wat in me op komt is het feit dat het voor bedrijven wel veel tijd (en dus geld) zal kosten om al zijn werknemers deze technieken eigen te maken. Want hoe mooi het ook allemaal klinkt, als je er nog nooit mee gewerkt hebt zal het gewoon veel tijd kosten om het goed onder de knie te krijgen. Maar ik weet zeker dat dat de moeite waard is. Sterker nog: ik denk dat ik zelfs (voor mezelf gesproken dan) sneller een site opgezet heb met goede html dan met tabellen, om over frames nog maar te zwijgen.

Voor degene die denkt: “leuk dat verhaal, maar hoe doe ik dat dan?”, die heeft geluk, want binnenkort zal hier op Netters.nl het tweede deel van dit artikel verschijnen dat over het “hoe” gaat.

Arjan

Bronnen