Scheid inhoud en structuur van presentatie

Webpagina’s bestaan uit meerdere lagen. De eerste laag is de inhoud van de pagina en de structuur van die inhoud. De tweede laag is de presentatie: de vormgeving van de webpagina en alles wat op die pagina staat. Het is belangrijk om deze lagen te scheiden.

Hoe pas ik dit toe?

Volg de volgende twee regels om inhoud en structuur van presentatie te scheiden:

  1. Structuur in HTML: Geef de betekenis van onderdelen van de webpagina aan met HTML-code. Het gaat dan bijvoorbeeld om koppen, paragrafen, tabellen, formulieren, enzovoorts. Gebruik de knoppen van de editor in het CMS om deze onderdelen op de webpagina te plaatsen.
  2. Presentatie in CSS: Gebruik CSS voor de vormgeving van de pagina-onderdelen. CSS is een taal om webpagina’s vorm te geven. CSS-bestanden worden door de bouwer gemaakt. Als je een webpagina maakt in het CMS wordt de vormgeving via het CSS-bestand automatisch toegepast.

Let op: gebruik HTML-elementen niet puur vanwege de vormgeving die ze met zich meebrengen, maar altijd vanwege hun betekenis.

Voorbeelden

HTML-elementen niet alleen gebruiken vanwege vormgeving

Met het <strong>-element (het knopje voor ‘vetgedrukt’ in de editor van het CMS) mag je bijvoorbeeld alleen woorden markeren die een sterke nadruk hebben. Het is niet de bedoeling om met dit element een tussenkop te markeren. Daarvoor zou je het <h2>- of <h3>-element moeten gebruiken. Andersom mag je ook geen kopje maken van een tekst die geen kop is om zo die tekst een bepaalde vormgeving te geven.

De volgende handleidingen hebben hier ook mee te maken:

Hoe draagt dit bij aan een betere website?

Door inhoud en structuur te scheiden van presentatie kunnen bezoekers die hulptechnologie gebruiken eenvoudiger overweg met webpagina’s. De hulptechnologie kan de inhoud van de pagina dan op basis van de structuur die is aangegeven op een andere manier aan de bezoeker presenteren. De bezoeker is niet meer afhankelijk van de visuele vormgeving, maar kan alle informatie over de structuur van de inhoud uit de HTML-pagina zelf halen.

Bouwer of redacteur?

De bouwer moet de website zo bouwen dat de vormgeving apart van de inhoud met CSS wordt toegepast. Hij moet er ook voor zorgen dat de redacteur met behulp van de knoppen in de editor de juiste HTML-elementen kan toepassen voor onderdelen van de inhoud. De redacteur moet zorgen dat hij HTML-elementen gebruikt vanwege de betekenis, en niet vanwege de vormgeving die ze hebben.

Technische details

Hoort bij