HTML en CSS: wat is het verschil en hoe werken ze samen?

Wat is het verschil tussen HTML en CSS?

HTML zegt wat er op een webpagina staat, CSS zegt hoe het eruitziet. Met HTML geef je elk stuk tekst een rol: dit is de titel, dit een alinea, dit een lijst met prijzen, dit een link. Met CSS kies je daarna de kleur, het lettertype, de ruimte ertussen en de plaats op het scherm. Twee talen, twee taken, één pagina.

De WHATWG, de groep die de standaard van HTML bijhoudt, noemt HTML de kerntaal van het web, en schrijft dat wie het uiterlijk wil bepalen daarvoor een stijltaal zoals CSS kan gebruiken (WHATWG). Denk aan een winkel. HTML is het gebouw, met de deur, de etalage en het uithangbord. CSS is de verf, de gestreepte luifel en de bloembakken. Zonder verf kan je nog altijd binnenstappen. Zonder gebouw valt er niets te verven.

Hoe ziet HTML eruit?

HTML bestaat uit elementen, en een element zet je tussen tags. Een openingstag zoals <h1> zegt waar de hoofdtitel begint, de sluittag </h1>, met een schuine streep, zegt waar hij stopt. Zo ziet een vereenvoudigd stukje eruit van de site van Knip & Krul, de kapsalon in Genk die in module 2 van onze cursus haar eerste stijl krijgt:

<header>
  <h1>Knip &amp; Krul</h1>
  <p class="slogan">Kapsalon in hartje Genk</p>
</header>
<main>
  <h2>Onze prijzen</h2>
  <ul>
    <li>Knippen: € 28</li>
    <li>Kleuren: € 55</li>
  </ul>
</main>
<footer>
  <p>Stationsstraat 8, Genk</p>
</footer>

Lees je de code hardop, dan hoor je alleen rollen, geen uiterlijk: een kop bovenaan met een hoofdtitel en een slogan, een tussenkop, een lijst met twee punten en een voettekst. Nergens staat dat de titel paars moet zijn of de voettekst grijs. class="slogan" is een naam die je zelf kiest, zodat je dat ene stuk straks in CSS terugvindt. Hoe tags en elementen werken, lees je in wat HTML is.

Waarom zegt HTML wat iets is, en niet hoe het eruitziet?

Omdat niet iedereen je pagina met de ogen leest. Een schermlezer leest geen kleuren voor, maar zegt wel dat iets een kop is, en een zoekmachine volgt de links die in je HTML staan. Maak je de tekst alleen groot en vet, dan ziet alleen wie kijkt dat het een titel is. Betekenis in HTML, uiterlijk in CSS: zo blijft de pagina voor iedereen begrijpelijk.

Toch is het populairste element op het web er een zonder betekenis. Van alle elementen op mobiele pagina's was in 2024 28,7% een <div>, een doos die niets zegt over wat erin zit, ver voor de link <a> met 12,6% (Web Almanac). Een <div> is niet fout, maar <header>, <main> en <footer> vertellen de browser veel meer. Hoe je die kiest, leer je in blokken met betekenis.

Waarom heeft een pagina zonder CSS toch grote koppen?

Omdat elke browser zijn eigen stijlblad meebrengt. Laad je een pagina zonder één regel CSS, dan zijn koppen toch groter dan gewone tekst, beginnen alinea's op een nieuwe regel met ruimte ertussen, en zijn links gekleurd en onderlijnd. MDN noemt dat de standaardstijlen van de browser: een eenvoudige opmaak die elke pagina leesbaar houdt, vastgelegd in stijlbladen in de browser zelf, die niets met HTML te maken hebben (MDN).

Dat verklaart een klassieke beginnersfout: een <h1> kiezen omdat je grote letters wil, of een <h3> gebruiken omdat de <h2> te groot lijkt. Het element kies je op zijn rol, nooit op zijn uiterlijk. Is de hoofdtitel te groot, dan maak je hem kleiner met CSS, en de HTML blijft zeggen dat het de hoofdtitel is.

Kies een element op wat het is, niet op hoe groot de browser het standaard toont. De grootte regel je met CSS.

Hoe ziet CSS eruit?

CSS schrijf je in regels. Een regel begint met een selector, die zegt welke elementen hij opmaakt. Daarna volgen tussen accolades een of meer declaraties: een eigenschap, een dubbele punt, een waarde en een puntkomma. Deze drie regels geven het stukje HTML van daarnet een eigen gezicht, zonder dat er in de HTML één letter verandert:

h1 {
  color: purple;
  text-align: center;
}

.slogan {
  font-style: italic;
}

h2 {
  color: teal;
}

De naam van de kapsalon wordt paars en staat in het midden, de slogan staat schuin en de tussenkop wordt groenblauw. CSS is in het Engels, en wel in het Amerikaanse: color, niet colour of kleur. Een eigenschap die de browser niet kent, slaat hij stilletjes over, zonder foutmelding. Daar trapt bijna iedereen wel eens in. In de les wat CSS is zie je bij elke regel het element oplichten dat hij raakt.

Wil je één bepaald stuk kiezen, dan geef je het in de HTML een class en zet je in CSS een punt voor die naam, zoals .slogan. Het verschil met een id leer je in class en id, en alle selectors en eigenschappen op een rij vind je op het spiekbriefje HTML en CSS.

Hoe koppel je CSS aan HTML?

Met een <link> in de <head> van je HTML. CSS staat meestal in een eigen bestand, een stijlblad, en dat werkt pas als de HTML ernaar verwijst. Bij Knip & Krul staat die verwijzing in index.html, vlak onder de titel van het tabblad:

<head>
  <title>Kapsalon Knip &amp; Krul</title>
  <link rel="stylesheet" href="style.css">
</head>

Het voordeel is groot: tien pagina's met dezelfde <link> delen hetzelfde stijlblad. Verander je de kleur van h2 één keer, dan verandert ze op de hele site. CSS kan ook in een <style>-element of in een style-attribuut op één element, maar dan geldt het alleen daar en vind je het later moeilijk terug. Hoe je een stijlblad koppelt, oefen je in een stijlblad koppelen. Op de pagina hieronder ligt die koppeling al: style.css is nog leeg en wacht op je eerste regel.

De regel die je net schreef, draaide in je eigen browser, op een echte pagina. Lurndo controleert hem niet op de letters, maar op wat de browser ervan maakt: welke kleur en uitlijning de voettekst echt krijgt, en of de rest van de pagina ongemoeid blijft. Dat gebeurt ook op een tweede versie van de pagina, met andere teksten. Schrijf je #808080 in plaats van gray, dan is dat dus net zo goed: het is dezelfde kleur.

Hoe maakt de browser van HTML en CSS één pagina?

In vier stappen: hij bouwt een boom van de HTML, legt de CSS-regels erop, rekent uit waar alles komt en kleurt dan de pixels. Zo beschrijven MDN en web.dev het, en zo gaat het bij elke pagina die je opent (MDN, web.dev):

1. De boom. De browser leest de HTML en maakt er een boom van, de DOM. <main> is een tak, de <h2> en de <ul> erin zijn kleinere takken, en de tekst in elke <li> is een blaadje.
2. De regels. Hij zoekt bij elk element de CSS-regels waarvan de selector past. Samen geeft dat de render tree: alles wat zichtbaar wordt, met zijn stijl. Een element met display: none valt eruit.
3. De layout. Hij rekent voor elk vak uit waar het precies staat en hoe groot het is, in pixels.
4. Het tekenen. Tot slot zet hij de render tree om in pixels op je scherm.

Daarom maakt het uit hoe je HTML in elkaar zit. CSS kiest elementen op hun plaats in die boom: footer p betekent "elke alinea binnen de voettekst". Een vergeten sluittag verschuift takken, en dan raakt een regel ineens iets anders dan je dacht. In onze lessen verandert de pagina naast je code terwijl je typt: telkens doorloopt de browser die vier stappen opnieuw, en jij ziet meteen wat je regel doet.

Waar past JavaScript in het verhaal?

JavaScript is de derde laag, die van het gedrag. HTML zegt wat er staat, CSS hoe het eruitziet, en JavaScript wat er gebeurt als je klikt of typt, zoals een menu dat openklapt of een formulier dat een fout meldt voor je het verstuurt. Anders dan HTML en CSS is JavaScript een echte programmeertaal, die de DOM en de stijlen kan aanpassen nadat de pagina geladen is. Om te beginnen heb je het niet nodig: met HTML en CSS alleen bouw je al een site die op elk scherm past.

Waar komen HTML en CSS vandaan?

HTML is ouder dan CSS: eerst kwam de inhoud, pas daarna de opmaak. In 1989 vond Tim Berners-Lee het World Wide Web uit en schreef ook de eerste versie van HTML (W3C). Zijn voorstel, Information Management: A Proposal, deed dat jaar de ronde bij CERN, en in augustus 1991 stonden de bestanden van het web voor iedereen op het net (W3C).

CSS kwam drie jaar later. Op 10 oktober 1994 publiceerde Håkon Wium Lie zijn voorstel voor Cascading HTML style sheets, stijlbladen voor HTML (W3C). In dezelfde maand werd het W3C opgericht, de organisatie die sindsdien de standaarden van het web uitwerkt (W3C). Lie en Bert Bos maakten van het voorstel een standaard: CSS1 werd op 17 december 1996 een aanbeveling van het W3C (W3C).

De browsers wachtten niet op die standaard. Internet Explorer 3, uitgebracht in augustus 1996, was de eerste commerciële browser met CSS, en in mei 1998 volgde CSS2 (W3C). HTML bleef intussen veranderen, met al een hele reeks versies tussen 1990 en 1995. Sinds een akkoord uit 2019 tussen de WHATWG en het W3C is er nog maar één HTML, de standaard die de WHATWG bijhoudt (WHATWG).

Moet je eerst HTML of CSS leren?

Allebei, en samen, met HTML een klein beetje eerst. CSS maakt elementen op die in de HTML staan, dus een regel als footer { color: gray; } heeft pas zin als je weet wat een <footer> is. Omgekeerd wordt HTML zonder CSS snel saai: na een paar lessen wil je kleur zien. Begin dus met tags en elementen, en schrijf je eerste CSS zodra je een pagina met koppen, alinea's en een lijst kan maken.

Dat de twee bij elkaar horen, zie je ook in de enquête die Stack Overflow elk jaar onder ontwikkelaars houdt. De Stack Overflow Developer Survey 2025 telt HTML/CSS als één taal: 61,9% van alle deelnemers gebruikt ze, 63% van de professionele ontwikkelaars en 66,6% van wie leert programmeren (Stack Overflow).

Zo is ook onze cursus opgebouwd. Module 1 begint bij tags en elementen, module 2 brengt je eerste CSS en in module 3 geef je je pagina structuur en betekenis. Die drie modules zijn gratis. Op HTML en CSS leren voor beginners lees je hoe de lessen op elkaar volgen, en op je eigen website leren maken waar je naartoe werkt. Wil je daarna iets netjes in het midden zetten, lees dan hoe je een div centreert.