Structuur en vormgeving scheiden

Houd structuur en vormgeving zoveel mogelijk gescheiden: gebruik HTML of (x)HTML voor de structuur van de site en CSS voor de vormgeving.

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.

dit is een belangrijke kopstekst

dit is tekst in een paragraaf

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.

h1 {
	color:green;
	font-size:150%;
}

p {
	color:red;
	font-size:90%;
}

Bekijk dit voorbeeld in een browser zonder stylesheet (dus alleen html) en het met CSS

Het scheiden van inhoud en vorm heeft een aantal voordelen

  • Je code wordt overzichtelijker en dus beter leesbaar
  • Het is makkelijker om de vormgeving van je site aan te passen
  • Je site wordt sneller gerenderd (is sneller te zien) in een webbrowser
  • Je site is beter vindbaar voor zoekmachines