Structuur en presentatie scheiden, HTML en CSS

HTML is oorspronkelijk bedoeld voor de structuur van een webpagina. CSS is bedoeld voor de presentatie van een webpagina. In dit artikel willen we ingaan op de vraag hoe deze ontwikkeling in gang is gezet. We beginnen bij HTML 1.0 en komen via CSS 1 uit bij CSS 2.

Geschiedenis van HTML

Momenteel zijn er vier versies in omloop van HTML. De laatste versie is 4.01. Waarom deze versie niet gewoon 4 heet dat zullen we straks te weten komen. In elk geval is er begonnen met HTML 1.0. Deze versie is nooit een standaard van het w3c geworden, simpelweg omdat ze te laat waren. Deze versie bestond maar uit een klein aantal elementen. Zo kon er geen achtergrondkleur ingesteld worden, tabellen en frames waren er nog niet. Voor inline afbeeldingen konden alleen .GIF bestanden gebruikt worden en van formulieren was ook nog geen sprake.
Dit had tot gevolg dat elke pagina er ongeveer hetzelfde uitzag. Een grijze achtergrond en Times Roman als lettertype. Blauwe links die na een bezoek rood werden en een enkele afbeelding, veel meer dan dat was het niet.

HTML 2.0

Een grote sprong voorwaarts, zo kun je de stap van HTML 1.0 naar 2.0 noemen. Deze versie ondersteunde achtergrondkleuren, en afbeeldingen, tabellen en formulieren met een paar velden werden mogelijk. Het w3c was opgericht en zij valideerden HTML 2.0.

HTML 3.2

Omdat het w3c te laat was om een specificatie te maken waar iedereen het over eens was kwam HTML 3.0 niet van de grond. Het werd pas goed geaccepteerd met 3.2. Deze versie ondersteunde al een eerste versie van CSS. Daarnaast kwamen er meer mogelijkheden om de presentatie van een pagina aan te pakken. Eigenlijk in tegenstelling tot de oorspronkelijke bedoeling van HTML, maar daarover later meer.

HTML 4.0

HTML 4.0 bracht een omslag in het denken en ging weer uit van het principe waar HTML voor uitgevonden was, de structuur en de opmaak van een pagina uit elkaar halen. CSS 2.0 werd ondersteund en daarmee werd de opmaak dus in een ander document geplaatst. Feitelijk is dat het principe van de basis voor HTML, Standard Generalized Markup Language, SGML. HTML 4.01, de uiteindelijke versie bracht nog een paar verbeteringen aan en werd tevens de basis voor XHTML.

Structuur en opmaak scheiden

Waarom is het scheiden van structuur en opmaak nu zo handig. We laten dit zien aan de hand van een voorbeeld. Eerst een webpagina met code volgens HTML 3.2.

<li><FONT SIZE="+1" FACE="comic sans ms" FAMILY="sans-serif"
COLOR="#0000FF"><P><A name="do"></a><B>Wat gaat <i>html-site</i> doen?</B></P></FONT>
<FONT SIZE="-1" FACE="comic sans ms" FAMILY="sans-serif"
COLOR="#000000"><P><i>Html-site</i> gaat je leren dat het beter is om
html en css te scheiden in plaats van samen te voegen.
Wanneer je deze twee uit elkaar haalt wordt het makkelijker om
bijvoorbeeld het lettertype aan te passen.</P></FONT>
<li><FONT SIZE="+1" FACE="comic sans ms" FAMILY="sans-serif"
COLOR="#0000FF"><P><A name="security"></a><B>Waarom gaan we dit doen? </B></P></FONT>
<FONT SIZE="-1" FACE="comic sans ms" FAMILY="Sans Serif"
COLOR="#000000"><P>We zien nog veel te veel websites die opmaak en
structuur door elkaar gooien en dat vinden we niet fijn!
</P></FONT>

Vervolgens eenzelfde tekst, maar dan volgens de principes van html 4.01.

<li>Wat gaat <i>html-site</i> doen?</li>
<p><i>Html-site</i> gaat je leren dat het beter is om
html en css te scheiden in plaats van samen te voegen.
Wanneer je deze twee uit elkaar haalt wordt het makkelijker om
bijvoorbeeld het lettertype aan te passen.</p>
<li>Waarom gaan we dit doen?</li>
<p>We zien nog veel te veel websites die opmaak
en structuur door elkaar gooien en dat vinden we niet fijn!</p>

Het verschil zal duidelijk zijn. Bij beiden bijvoorbeeld een lettertype veranderen. In het voorbeeld met HTML 3.2 zul je daarvoor de code in moeten duiken, die onoverzichtelijk wordt. Bij HTML 4.01 hoef je de html-code niet meer aan te raken, je kunt alles in je CSS bestand gaan doen.
Daarnaast heeft CSS als voordeel dat je het schuingedrukte stukje tekst (<i>) ook nog eens vetgedrukt kunt maken of onderstreept, zonder code in het html bestand toe te voegen. HTML 3.2 heeft die mogelijkheid niet.

Een goed begin…

Wanneer je dus met een website begint is het zaak om je structuur en je opmaak vanaf het begin te gaan scheiden. Dus geen font-tags meer met color en family, gewoon de structuur voor je pagina maken en daarna met behulp van een stijlblad de opmaak gaan opzetten. Wil je hiermee direct aan de slag? Lees dan ons artikel HTML en CSS voor beginners, de definitieve versie.
Hoe ben jij ooit begonnen met een website?