Webstandaarden, deel 2 – Hoe pas ik ze toe

Dit is dan het tweede deel in de miniserie over webstandaarden. In het eerste deel besprak ik wat webstandaarden zijn en waarom je ze zou moeten gebruiken. In dit deel wil ik ingaan op het ‘hoe’; hoe pas ik die webstandaarden toe. Omdat het natuurlijk niet te doen is om alle mogelijk voorbeelden toe te lichten zal ik me beperken tot een aantal belangrijke zaken. Het belangrijkste bij dit verhaal blijft toch dat je het idee te pakken krijgt; dan komt de rest vanzelf.

Scheiding van layout, structuur en gedrag

Eigenlijk zegt de titel al wat de hele basis is in het gebruik van de webstandaarden. Zorg dat je je website onder verdeelt in onderstaande drie punten:

• Structuur: (x)HTML
• Layout: CSS
• Functionaliteit: JavaScript

Structuur

Het belangrijkste wat je in gedachten moet houden bij de structuur van de pagina is dit: Gebruik de tags waarvoor ze bedoeld zijn! Oftewel: semantische gebruik van HTML.

Hieronder zal ik een paar korte handvatten bieden. Ongetwijfeld kunnen er nog veel meer in het lijstje, maar zoals ik al zei: als je het idee snapt, dan komt de rest vanzelf wel.

Paragrafen en tekst

Voor headings gebruik je in je site de <hx> tags. Hierin heb je de keuze van h1 t/m h6, hoewel de praktijk leert dat je h5 of h6 vrijwel nooit gebruikt. Met deze headings geef je belangrijkheid aan van de verschillende kopjes in je site. Een goede tip hierbij is: zorg dat de verdeling tussen de headings in de ‘hoofdtekst’ op de site goed in verhouding staat t.o.v. Eventuele headings in je linker- of rechterbalk van de site. Zo geef je ook voor zoekmachines aan wat belangrijk is.

En verder hebben natuurlijk de ‘gewone’ <p> tags voor de teksten. Eigenlijk moet je gewoon zorgen dat al je teksten in zo’n paragraph tekst staan. Wil je meer of minder ruimte tussen twee alinea’s? Gebruik dan css hiervoor en geen extra, lege paragraph tag.

Menu’s en opsommingen

Het menu in een site kun je eigenlijk zien als een (gestructureerde) opsomming van items. We gebruiken hiervoor dan ook de <ul> en <li> lags. Met behulp van css kun je dan alle kanten op qua design. Zelfs als je rare fonts wil gebruiken kun je plaatjes (inclusief mouseover) in je menu verwerken, zonder een enkele regel Javascript.

Heb je andere opsommingen in je site kun/moet je hiervoor ook de <ul> of <ol> tags gebruiken. Het is heel wat gestructureerder en overzichtelijk dan een paar regels met een <br> er tussen.

Tabellen en divs

Een veel genoemd, maar belangrijk punt is het gebruik (of juist het niet gebruiken) van tabellen. Om maar met de deur in huis te vallen: tabellen gebruiken op je elementen te positioneren is niet het correcte gebruik hiervan. Immers, zaken voor de layout en positionering horen thuis in de css en dien je dus niet op te lossen door alles in je site maar op te delen in rijen en kolommen. Hiervoor hebben we het <div> element, welke staat voor division. Met deze tag kun je gebieden of blokken in je site aangeven en later positioneren met css. Deze blokken hebben totaal geen semantische waarde, dus kunnen prima gebruikt worden voor dit soort zaken.

Zijn tabellen dan helemaal fout? Helemaal niet. Tabellen kun (of moet) je gebruiken om de zogenaamde tabulaire data weer te geven, zoals bijvoorbeeld een ledenoverzicht of de jaarcijfers. Zaken waar je normaal gesproken Excel voor zou gebruiken (afgezien van de berekeningen).

Binnen de tekst

Wil je bepaalde woorden binnen de tekst benadrukken kun je het <em> of <> element gebruiken. Deze elementen worden vaak als vervanger voor resp. het <i> of <b> gezien, maar dat is niet helemaal correct. Zoals je misschien wel weet zijn het <i> en het <b> element geen geldige elementen meer, omdat ze in principe totaal geen semantische, maar alleen visuele waarde hebben. En dat is nu net waar we vanaf willen. Moet je dan nu <em> of <strong> gebruiken om iets cursief of vet te maken? Nee, maar wel om woorden te benadrukken. En hoewel deze elementen in browsers al vaak wel deze visuele eigenschappen hebben, dienen ze hier niet voor gebruikt te worden, al gaan die twee natuurlijk wel vaak hand in hand.

Een ander element wat je kunt gebruiken voor binnen je tekst is het <span> element. Dit element kun je vergelijken met het div element, met als enig verschil dat en div een block-level (als een blok dus) element is en span een inline (binnen een regel) element. Dit span element kun je dus gebruiken om bepaalde delen van de tekst een kleurtje te geven of te onderstrepen. De <font> tag is dus passé (en inmiddels ook al geen geldig element meer)

Tip: valideer je pagina! Zo weet je of je html in ieder geval aan de regels voldoet. Dat je pagina nu perfect is opgebouwd wil dit niet zeggen, maar je hebt in ieder geval een stap in de goede richting gedaan.

Tip 2: Je pagina moet er zonder javascript en CSS ook begrijpbaar, leesbaar en functioneel blijven. (Gebruik een textbrowser (bijv. lynx) om te testen, of schakel m.b.v. developer tools de JS en CSS uit)

Layout

Alles wat maar te maken heeft met het visuele aspect van je website los je op in de CSS. Eventuele ?hulpcontainers? (de divs) zou je in de HTML kwijt kunnen, maar strooi er niet teveel mee rond. Het moet nog wel overzichtelijk blijven; zowel voor de programmeur(s) als de zoekmachines.

Tip: ga niet alles klakkeloos positioneren d.m.v. position:absolute;. Zo haal je de hele flexibiliteit uit je site weg en veroorzaakt daardoor vaak veel problemen. Maak voor je positionering gebruik van float en margin/padding en waar nodig (voor bijvoorbeeld een fixed footer) kan er absoluut gepositioneerd worden.

Gedrag

Gebruik javascript alleen als alles zonder de javascript ook nog functioneel en leesbaar is! Bouw dus geen menu?s op d.m.v. javascript door al je menu-items in een array te gooien en het dan op te bouwen. Dit wordt ook door zoekmachines niet ondersteunt, dus zal je navigatie daar totaal onzichtbaar voor zijn.

Javascript kun je wel gebruiken om bepaalde functionaliteit toe te voegen aan je pagina. Een voorbeeld hiervan is formulier validatie of het aanpassen van styles, zodat je bepaalde deleen van je site (bijv. submenu’s) wel of niet kan tonen.

Tip: Nogmaals: zorg dat je site ook goed blijft werken zonder javascript. Zorg dus ook altijd voor een server-side formulier controle, zodat ‘mensen’ zonder javascript ook op hun ‘fouten’ gewezen kunnen worden.

Tot slot

Natuurlijk valt over dit alles veel meer te zeggen en balanceren veel dingen op het randje van ?mag dit nu wel of niet??, maar ik hoop dat je het principe een beetje te pakken hebt en dat ik je hiermee op weg heb kunnen helpen.

In het volgende deel kun je meer lezen over doctypes, het gebruik daarvan en wat voor gevolgen het kan hebben voor je site.

En last but not least: schroom niet om de discussie aan te gaan of wat vragen te stellen!

Arjan

• Tweet