Realiseren

Veel wegen leiden naar Rome, dat is ook bij het ontwikkelen van een website. Er zijn veel manieren om met html op het eerste gezicht hetzelfde resultaat te krijgen. Toch zijn er verschillen tussen de manieren en zijn er richtlijnen ontwikkeld om een betere kwaliteit en toegankelijkheid te creëren. Hieronder een aantal verschillende aspecten met betrekking tot het ontwikkelen in html.

World Wide Web Consortium

Het World Wide Web Consortium (kortweg: W3C) is de organisatie die de webstandaarden ontwikkelt en beheert. Het W3C is dan ook een goed startpunt voor ontwikkelaars. Naast de standaarden die het W3C ontwikkelt en beschrijft geeft het W3C ook richtlijnen. Veel andere organisaties (onder andere overheden) baseren hun eigen richtlijnen op de richtlijnen van het W3C.

De meest gebruikte webtalen zijn html of xhtml en css. Wie html gebruikt wordt aanbevolen versie 4.01 te volgen, en wie xhtml gebruikt (welke op zijn beurt sterker aanbevolen wordt dan html) wordt aanbevolen versie 1.0 te gebruiken. Voor css wordt level 2.1 aanbevolen.

Valide markup

Een eerste stap voor goede kwaliteit html is valide markup. Valide markup betekent dat de html code voldoet aan de vereisten van de standaard. Het W3C biedt online tools om de broncode van een website te controleren op fouten. Code zonder fouten kan sneller ingeladen worden en geeft een kleinere kans op visuele fouten in verschillende browsers.

Scheiding vormgeving en structuur

In html code kan ook css geïmplementeerd worden. Daarnaast kunnen bepaalde html tags gebruikt worden om de vormgeving van de website vast te leggen. Het scheiden van de vormgeving en de structuur (inhoud en structuur in de html en vormgeving in de css) biedt echter grote voordelen: betere toegankelijkheid, betere compatibiliteit met mobiele apparaten, betere plaatsing in zoekmachines en gemakkelijker onderhoud van de website.

Beschrijvende markup

Beschrijvende markup gaat weer een stukje verder dan alleen de scheiding tussen vormgeving en structuur. Bij beschrijvende markup worden de html tags gebruikt om te beschrijven om wat voor soort inhoud het gaat, bijvoorbeeld een h1 voor de hoofdkop van de pagina. De voordelen komen overeen met de voordelen van scheiding vormgeving en structuur, maar wegen hier nog sterker. Er zijn geen nadelen bij het gebruik van beschrijvende markup. Hieronder een overzicht van de meest gebruikte html tags en hun toepassing.

Tag Toepassing
H1, h2, h3, h4, h5, h6 Een h-tag wordt gebruikt om koppen aan te geven. H1 wordt gebruikt als hoofdkop en de volgende koppen als subkoppen. Sla bij de koppen geen niveau over, omdat de beschrijvende functie van de belangrijkheid van de kop dan verloren gaat.
P Een p-tag wordt gebruikt om paragrafen aan te geven. Een paragraaf is een stuk tekst dat vaak één onderwerp behandeld.
A De a-tag wordt gebruikt om te linken tussen pagina’s. Geeft naast de href ook een titel op om te vertellen waar de link heen gaat.
Em, strong Een em-tag en strong-tag lijken veel op de i- en b-tag. Het i- en b-tag zijn echter visueel en niet beschrijvend. Gebruik het em-tag voor belangrijke woorden en het strong-tag voor zeer belangrijke woorden.
Abbr Een abbr-tag wordt gebruikt om afkortingen aan te geven en te omschrijven.
Dfn Een dfn-tag wordt gebruikt om definities die elders gedefinieerd staan.
Cite Een cite-tag wordt gebruik om te refereren naar personen of titels van andere publicaties.
Blockquote Een blockquote wordt gebruikt om (lange) citaten aan te geven.
Ul, ol, li Een ul-tag en ol-tag worden gebruikt om lijsten aan te geven, waar het ul-tag een ongeordende lijst aangeeft, geeft het ol-tag een geordende lijst aan waarin de volgorde de prioriteit aangeeft. Het li-tag geeft een lijstitem binnen een lijst aan. Een navigatiemenu is in veel gevallen ook een lijst.
Dl, dt, dd Een dl-tag wordt gebruikt voor een definitielijst of begrippenlijst. Binnen de definitielijst wordt het dt-tag gebruikt om de definitie aan te geven, en het dd-tag om de uitleg aan te geven.
Code Een code-tag wordt gebruikt om computercode aan te geven.
Fieldset Een fieldset-tag geeft een verband tussen een groep velden in een formulier aan.
Address Een address-tag geeft adresinformatie aan.
Table, tr, thead, tbody, tfoot, col, kopgroep, td, th, caption Een table-tag geeft een tabel aan waarin gestructureerde informatie staat. De overige tags worden gebruikt om de informatie binnen de tabel te groeperen en te omschrijven.

 

Structureren html code

Naast de beschrijvende markup waarmee het type inhoud en in beperkte mate ook de belangrijkheid van de inhoud aangegeven kan worden, wordt broncode gebruikt om de belangrijkheid van de content aan te geven. Dit wil zeggen dat de belangrijkste inhoud van de pagina bovenaan komt en minder belangrijke informatie meer naar onderen. In de praktijk uit dit zich door het hoofdartikel bovenaan te plaatsen in de bron en de overige elementen (waaronder navigatie) onderaan. Visueel kan de navigatie (en andere elementen) met css op de juiste plaats gepositioneerd worden. Net als bij de vorige punten geeft het structureren van de inhoud voordelen voor de plaatsing in zoekmachines en de toegankelijkheid. Het nadeel van het structureren voor de ontwikkelaar is dat het een hogere leercurve heeft om dit echt goed onder de knie te krijgen.

Gelaagd bouwen

Gelaagd bouwen wil zeggen dat wanneer een bepaalde techniek niet beschikbaar is, er een alternatief voor is. Het uitgangspunt is dat de basis van de website altijd volledig functioneel en toegankelijk is. Naarmate er meer technieken beschikbaar zijn in de browser van de gebruiker (afbeeldingen, javascript, flash), worden extra functionaliteit en/of visuele verbeteringen toegevoegd. Andersom kan het ook bekeken worden: als geen flash ondersteund is wordt er een afbeelding getoond, wanneer geen afbeelding ondersteund is wordt er alternatieve tekst getoond. De voordelen van gelaagd bouwen zijn een toegankelijkere website en een betere indexatie in de zoekmachines. Nadeel is dat de inhoud deels dubbel gemaakt moet worden, dus iets meer tijd kost (een flashanimatie moet in afbeelding gezet worden en er moet een alternatieve tekst geschreven worden).

Accessibility

In Nederland kampen zo’n 2.4 miljoen mensen (15% van de bevolking) met een handicap die het gebruik van internettoepassingen minder goed mogelijk maakt. Bij het toepassen van de bovenstaande richtlijnen zullen deze mensen geen problemen ondervinden bij het bezoeken van de website. Om extra te controleren of de website inderdaad geen problemen ondervindt heeft Stichting Drempelvrij (www.drempelvrij.nl) een online tool ontwikkeld. Stichting Drempelvrij (maar ook de webrichtlijnen van de overheid) hebben hun richtlijnen gebaseerd op de richtlijnen van het W3C voor accessibility (WCAG).

Trackback URL for this post:

http://webbl.nl/trackback/21
| Meer