Scheiding tussen structuur en vormgeving

Een belangrijk aspect van het bouwen van duurzaam toegankelijke websites is het principe van scheiding tussen structuur en vormgeving. Het toepassen van het principe betekent kostenbesparingen, efficiëntie in bouw en onderhoud, een betere herkenbaarheid en bruikbaarheid.

Uitleg van deze richtlijn

HTML voor structuur

De inhoud van de pagina bestaat uit tekst, afbeeldingen, tabeldata, geluidsfragmenten of zelfs Flash-animaties. Deze inhoud wordt beschreven door middel van gestructureerde HTML (Hyper Text Markup Language). HTML beschrijft wat de inhoud is.

CSS voor vormgeving

Gescheiden hiervan, in een apart bestand dat aan de pagina is gekoppeld, wordt het uiterlijk van deze structuur bepaald door middel van een andere taal, CSS (Cascading Style Sheets). CSS beschrijft hoe de inhoud eruit ziet.

Dit afzonderlijke CSS-bestand kan worden toegepast op één pagina, maar bewijst pas echt zijn nut als het gekoppeld wordt aan meerdere pagina's. Het hoeft door een browser maar één keer geladen te worden (caching) waarna het toegepast kan worden op tientallen, zo niet honderden pagina's.

"Experience has shown that separating the structure of a document from its presentational aspects reduces the cost of serving a wide range of platforms, media, etc., and facilitates document revisions."

De voordelen van scheiding tussen structuur en vormgeving

Voor opdrachtgevers

  • Eenvoudiger beheer. Door de scheiding van vorm en inhoud is een lay-outwijziging eenvoudig door te voeren voor de hele site. Zelfs een nieuw ontwerp is relatief eenvoudig door te voeren.
  • Vanwege de kleinere afzonderlijke bestanden en de genoemde caching, is er een besparing op het gebruik van de bandbreedte van de webhost. Naast een prestatiewinst, kan dit ook een kostenbesparing betekenen.

Voor webontwikkelaars en contentbeheerders

  • Het afzonderen van de vormgeving van de site maakt dat de inhoud overzichtelijk en de structuur eenvoudig is. Dit vergemakkelijkt de bouw en het onderhoud.
  • Doordat de vormgeving gecentraliseerd is in één of enkele bestanden, kan het uiterlijk van vele pagina's binnen een site snel en praktisch worden aangepast en aangevuld. Zonder de scheiding tussen structuur en vormgeving zal iedere pagina afzonderlijk moeten worden aangepast, wat aanzienlijk meer tijd kost. Een gecentraliseerde vormgeving betekent ook in potentie een consistent uiterlijk van de site.
  • Vaak zijn meerdere ontwikkelaars verantwoordelijk voor de bouw van een website. Door het scheidingsprincipe kunnen ontwikkelaars grotendeels onafhankelijk van elkaar aan het uiterlijk en de inhoud/structuur van de site werken. Dit bespoedigt het productieproces en vermindert de kans op onvolkomenheden.

Voor bezoekers

  • Consistentie in het uiterlijk van de site maakt een site beter herkenbaar en dus beter bruikbaar.
  • Afzonderlijke bestanden zijn kleiner wat voor kortere downloadtijden en een besparing van de bandbreedte van de bezoeker zorgt.
  • Via zogenaamde User Style Sheets kunnen bezoekers gemakkelijk de vormgeving van een website aan hun voorkeuren aanpassen.

Gerelateerde richtlijnen

  • R-pd.1.2: Bouw websites volgens het principe van 'gelaagd bouwen'.
  • R-pd.2.9: Bouw een website volgens de Web Content Accessibility Guidelines (WCAG 1.0) van het W3C.