Cheatsheet HTML, CSS & JavaScript
Snelle naslag voor de meest gebruikte HTML-tags en CSS-eigenschappen.
HTML
Paginastructuur
Basisstructuur van een HTML-pagina
Elke HTML-pagina begint met dezelfde basisstructuur:
<!DOCTYPE html>— vertelt de browser dat dit een HTML5-pagina is<html>— de buitenste tag die alles omhult<head>— informatie over de pagina (niet zichtbaar op de pagina zelf)<meta charset="UTF-8">— zorgt dat speciale tekens zoals é en ij goed worden weergegeven<title>— de tekst die in het browsertabblad verschijnt<body>— alles wat de bezoeker ziet staat hier
Tekst
Koppen — h1 t/m h6
Koppen geven structuur aan een pagina. <h1> is de hoofdkop — gebruik die maar één keer per pagina. <h2> en <h3> zijn tussenkoppen voor secties en subsecties. Gebruik koppen altijd op volgorde: sla geen nummers over.
Paragraaf — p
Een <p> tag maakt een alinea. De browser voegt automatisch ruimte toe boven en onder elke paragraaf, zodat alinea's duidelijk van elkaar gescheiden zijn.
Vetgedrukt en cursief — b, i
Met <b> maak je tekst vetgedrukt en met <i> maak je tekst cursief. Je kunt ze ook combineren door de ene tag binnen de andere te zetten.
Lijsten
Ongenummerde lijst — ul
Een <ul> (unordered list) maakt een lijst met bolletjes. Elk item staat in een <li> tag. Gebruik een ongenummerde lijst als de volgorde niet uitmaakt, bijvoorbeeld een boodschappenlijst.
Genummerde lijst — ol
Een <ol> (ordered list) maakt een genummerde lijst. De browser nummert de items automatisch. Gebruik een genummerde lijst als de volgorde wél uitmaakt, bijvoorbeeld stappen in een recept.
Afbeeldingen en links
Afbeelding — img
Met <img> voeg je een afbeelding in. Het is een zelfsluitende tag — hij heeft geen sluitingstag. De drie belangrijkste attributen:
src— de URL van de afbeeldingalt— een beschrijving van de afbeelding; wordt getoond als de afbeelding niet laadt en voorgelezen door schermlezers voor slechtziendenwidth— de breedte in pixels; de hoogte past automatisch mee zodat de afbeelding niet vervormd raakt
Link — a
Met <a> maak je een klikbare link. Het href attribuut bevat de URL waar de link naartoe gaat. Met target="_blank" opent de link in een nieuw tabblad in plaats van het huidige.
Semantische HTML
Pagina-structuur — header, nav, main, section, article, footer
Semantische tags vertellen wat een blok is, niet alleen hoe het eruitziet. Ze werken net als <div>, maar zijn beter voor screenreaders en zoekmachines.
| Tag | Betekenis |
|---|---|
<header> | Bovenkant pagina (logo, titel) |
<nav> | Navigatiemenu |
<main> | Hoofdinhoud |
<section> | Afgebakend onderdeel |
<article> | Op zichzelf staand stuk (blogpost) |
<footer> | Onderkant pagina |
Formulieren
Invoervelden — form, input, label
Een formulier bestaat uit <input>-velden met <label> ervoor. Het for-attribuut van het label moet overeenkomen met het id van de input. Veelgebruikte type-waarden: text, number, email, password, checkbox, radio.
Tekstvak en dropdown — textarea, select
Voor langere teksten gebruik je <textarea>. Voor een keuzelijst (dropdown) gebruik je <select> met <option>-elementen.
<label for="bericht">Bericht:</label>
<textarea id="bericht" rows="4"></textarea>
<label for="land">Land:</label>
<select id="land">
<option value="nl">Nederland</option>
<option value="be">België</option>
</select>
Elke <option> heeft een zichtbare tekst (tussen de tags) en een value (de waarde die het formulier verstuurt).
Groeperingen
Inline-element — span
<span> is het inline-tegendeel van <div>. Gebruik hem om een klein stukje tekst binnen een paragraaf te stijlen zonder een nieuwe regel te beginnen.
<p>Dit is <span class="highlight">een gemarkeerd</span> woord.</p>
.highlight {
background-color: yellow;
color: red;
}
Vuistregel: <div> voor blokken (rondom elementen), <span> voor tekst-stukjes binnen een regel.
Display-types — block, inline, inline-block
Elk HTML-element heeft een standaard display-type:
| Type | Gedrag | Voorbeelden |
|---|---|---|
block | Nieuwe regel, vult breedte | <p>, <h1>, <div> |
inline | In de tekst-stroom, breedte = inhoud | <a>, <span>, <b> |
inline-block | In de stroom, mét width/padding | (zelf instellen) |
Je verandert het met de CSS-eigenschap display:
.knop {
display: inline-block; /* naast elkaar, maar mét padding en breedte */
padding: 8px 16px;
}
Blok-element — div
Een <div> is een onzichtbaar blok dat je gebruikt om elementen te groeperen. Op zichzelf heeft een <div> geen opmaak — je stijlt hem via CSS. Het is handig om meerdere elementen samen te stijlen of te positioneren.
CSS
Tekst opmaken
Kleur, lettergrootte en lettertype — color, font-size, font-family
Met color verander je de tekstkleur. Kleuren kun je opgeven als naam (red), hex-code (#e63946) of RGB-waarde (rgb(230,57,70)).
Met font-size stel je de lettergrootte in. rem is relatief aan de basisgrootte van de browser (standaard 16px), px is een vaste pixelgrootte.
Met font-family kies je het lettertype. Zet altijd een algemeen alternatief achter de komma (sans-serif, serif) voor het geval het gewenste lettertype niet beschikbaar is.
Eenheden
CSS-eenheden — px, rem, em, %
| Eenheid | Wat | Wanneer |
|---|---|---|
px | Vaste pixels | Borders, kleine vaste spacing |
rem | Relatief aan pagina-basis (meestal 16px) | Lettergrootte, padding, margin |
em | Relatief aan eigen font-size | Padding binnen een knop |
% | Procent van de ouder | Layout-breedte |
h1 { font-size: 2rem; } /* 32px bij standaard */
button { padding: 0.5em 1em; } /* schaalt mee met font-size */
.kaart { width: 80%; } /* 80% van de ouder */
border: 2px solid black; /* altijd 2 pixels */
Vuistregel: rem voor tekst en spacing (toegankelijk), px voor borders, % voor layout-breedte, em alleen als bewuste keuze.
Box-model
Achtergrond, padding, margin en border
Het box-model beschrijft hoe ruimte rondom een element werkt:
background-color— de achtergrondkleur van het elementpadding— ruimte binnen het element, tussen de inhoud en de randmargin— ruimte buiten het element, afstand tot andere elementenborder— een zichtbare rand om het element; opbouw isdikte stijl kleur(bijv.2px solid blue)border-radius— maakt de hoeken afgerond
Box-sizing — border-box
Standaard telt width alleen voor de inhoud — padding en border komen er bovenop. Met box-sizing: border-box worden padding en border meegerekend in de breedte:
* {
box-sizing: border-box;
}
Zet bovenaan je CSS-bestand. Dan is width: 300px écht 300px, ook met padding en border.
Breedte en hoogte — width, height
Met width en height stel je de afmetingen van een element in pixels in. Als je alleen width instelt bij een afbeelding, past de hoogte automatisch mee. Bij een <div> moet je beide instellen als je een vaste grootte wilt.
Selectoren
Klasse-selector — .naam
Met een klasse geef je één specifiek element een eigen stijl, zonder alle elementen van dat type te veranderen. Je voegt een klasse toe via het class attribuut in HTML. In CSS selecteer je een klasse met een punt voor de naam (.uitgelicht). Een element kan meerdere klassen tegelijk hebben, gescheiden door een spatie.
Id-selector — #naam
Een id is een unieke naam voor één element (mag maar één keer per pagina voorkomen). In CSS selecteer je een id met een hekje (#):
<p id="welkom">Welkom!</p>
#welkom {
color: green;
font-size: 2rem;
}
Gebruik class voor stijlen die je hergebruikt, id voor één specifiek element dat je later ook met JavaScript wilt aanspreken.
Pseudo-klassen — :hover, :first-child, :last-child, :nth-child
Pseudo-klassen stijlen een element op basis van zijn toestand of positie, zonder dat je een klasse in de HTML hoeft toe te voegen:
:hover— actief als de muis over het element beweegt:first-child— het eerste kind-element van zijn ouder:last-child— het laatste kind-element:nth-child(n)— het n-de kind-element
Schrijf de pseudo-klasse direct na de selector, zonder spatie: a:hover is anders dan a :hover.
Flexbox
Flexbox — display: flex, justify-content, align-items, gap
Flexbox zet elementen naast elkaar en laat je ze eenvoudig uitlijnen. Je zet display: flex op de container (het omhullende element), niet op de items zelf.
justify-content— uitlijning langs de horizontale as:flex-start(links),center,space-between(verspreid)align-items— uitlijning langs de verticale as:flex-start(boven),center,stretchgap— ruimte tussen de items onderlingflex-direction: column— zet de items onder elkaar in plaats van naast elkaar
Position
Positioneren — position, top/right/bottom/left
Met position haal je een element uit de gewone tekstvolgorde en bepaal je waar het komt te staan:
| Waarde | Wat |
|---|---|
static | Standaard (geen verschuiving mogelijk) |
relative | Schuif t.o.v. eigen plek |
absolute | Schuif t.o.v. dichtstbijzijnde ouder met position: relative |
fixed | Blijf op vaste plek in browservenster (ook bij scrollen) |
.container { position: relative; } /* referentie voor absolute */
.badge {
position: absolute;
top: 0;
right: 0; /* hoek rechtsboven van container */
}
.scroll-knop {
position: fixed;
bottom: 20px;
right: 20px; /* blijft op het scherm bij scrollen */
}
Grid
2D-layout — display: grid
display: grid op een container maakt een rooster met rijen en kolommen. De fr-eenheid verdeelt beschikbare ruimte in delen.
.galerij {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* drie even brede kolommen */
gap: 10px;
}
| Eigenschap | Wat |
|---|---|
grid-template-columns | Definieert kolommen (bijv. 1fr 1fr 1fr, 200px 1fr) |
grid-template-rows | Definieert rijen |
gap | Ruimte tussen rijen en kolommen |
grid-column: span 2 | Item neemt 2 kolommen in beslag |
grid-column: 1 / -1 | Item over volle breedte (eerste tot laatste lijn) |
Gebruik Grid voor 2D-layouts (foto-galerij, dashboard); Flexbox voor 1D (rij of kolom).
Media queries
Responsief design — @media (max-width: ...)
Een media query past CSS alleen toe als de schermbreedte aan een voorwaarde voldoet:
.kaart { width: 600px; }
@media (max-width: 700px) {
.kaart { width: 100%; }
}
| Voorwaarde | Wanneer geldig |
|---|---|
(max-width: 700px) | Schermen smaller dan 700px (mobiel) |
(min-width: 800px) | Schermen breder dan 800px (desktop) |
Mobile-first: schrijf je basis-CSS voor mobiel, voeg @media (min-width: ...)-regels toe voor groter.
Zonder deze meta-tag in <head> rendert de browser de pagina alsof het scherm 980px breed is — media queries triggeren dan niet op telefoons:
<meta name="viewport" content="width=device-width, initial-scale=1">
JavaScript
DOM manipulatie
Tekst veranderen — getElementById en textContent
Met document.getElementById('id') selecteer je een HTML-element op basis van zijn id-attribuut. Via .textContent verander je de tekst van dat element.
Je schrijft de code direct in het onclick-attribuut — geen functie nodig voor eenvoudige acties:
<button onclick="document.getElementById('bericht').textContent = 'Geklikt!'">
Klik mij
</button>
Let op hoofdletters: getElementById (niet getElementByID). En het id in de HTML moet exact overeenkomen — 'bericht' is iets anders dan 'Bericht'.
Stijl veranderen — .style en camelCase
Met .style pas je de CSS-stijl van een element aan vanuit JavaScript. CSS-eigenschappen met een koppelteken schrijf je als camelCase — zonder koppelteken, tweede woord met hoofdletter:
| CSS | JavaScript |
|---|---|
color | color |
background-color | backgroundColor |
font-size | fontSize |
border-radius | borderRadius |
<button onclick="document.getElementById('tekst').style.color = 'red'">
Rood
</button>
Functies en scripts
Functie in een <script> tag
Als je meerdere dingen tegelijk wilt doen bij een klik, zet je de code in een functie in een <script> tag. De <script> tag staat onderaan de <body>, zodat de HTML-elementen al geladen zijn.
<body>
<button onclick="verander()">Klik mij</button>
<script>
function verander() {
document.getElementById('bericht').textContent = 'Geklikt!';
document.getElementById('bericht').style.color = 'green';
}
</script>
</body>
Extern script — script.js en defer
Bij een groter project zet je de JavaScript-code in een apart bestand script.js. Je koppelt dat in de <head> met het defer-attribuut — dan wacht de browser met uitvoeren tot de HTML volledig geladen is.
<head>
<script src="script.js" defer></script>
</head>
Met console.log() schrijf je berichten naar het consolepanel om te controleren of je code werkt.
function verander() {
document.getElementById('bericht').textContent = 'Geklikt via script.js!';
console.log('De knop is geklikt.');
}
Waarden en operatoren
Datatypes — number, string, boolean
JavaScript kent drie basis-datatypes:
| Type | Wat | Voorbeeld |
|---|---|---|
number | Getal | 42, 3.14 |
string | Tekst tussen quotes | 'hallo', "wereld" |
boolean | Waar of onwaar | true, false |
let leeftijd = 16; // number
let naam = 'Lisa'; // string
let isIngelogd = true; // boolean
Check het type van een waarde met typeof:
console.log(typeof leeftijd); // 'number'
console.log(typeof naam); // 'string'
Reken-operatoren — + - * /
10 + 5 // 15
10 - 5 // 5
10 * 5 // 50
10 / 5 // 2
Bij strings plakt + ze aan elkaar (concatenatie):
'Hallo, ' + 'wereld!' // 'Hallo, wereld!'
'Ik ben ' + 16 + ' jaar.' // 'Ik ben 16 jaar.'
Let op: '5' + 1 is '51' (plakken), niet 6. Gebruik Number('5') + 1 om om te zetten.
Template literals — backticks en placeholders
Met backticks (`) kun je variabelen direct in tekst plaatsen via placeholders met dollar-accolades:
const naam = 'Lisa';
const leeftijd = 16;
// Oud (met +)
const zin1 = 'Hoi ' + naam + ', je bent ' + leeftijd + ' jaar.';
// Nieuw (template literal)
const zin2 = `Hoi ${naam}, je bent ${leeftijd} jaar.`;
Voordelen:
- Leesbaarder bij veel variabelen
- Berekeningen mogen in een placeholder:
`Volgend jaar: ${leeftijd + 1}` - Werkt over meerdere regels
Let op: het is een backtick (linksboven op het toetsenbord), geen apostrof.
Vergelijk-operatoren — ===, !==, >, <
Vergelijken levert altijd true of false op:
| Operator | Betekenis |
|---|---|
=== | Gelijk aan (strikt) |
!== | Niet gelijk aan |
> | Groter dan |
< | Kleiner dan |
>= | Groter of gelijk |
<= | Kleiner of gelijk |
5 > 3 // true
5 === 5 // true
5 === '5' // false (number vs string)
Gebruik altijd === (strikt), niet ==. == doet automatische type-conversie en geeft soms verrassende resultaten.
Variabelen
Variabele aanmaken en aanpassen — let en const
Met let maak je een variabele aan die kan veranderen. Met const maak je een constante — de waarde blijft hetzelfde.
let teller = 0; // mag veranderen
teller = teller + 1; // waarde aanpassen
const startwaarde = 0; // mag niet meer veranderen
Vuistregel: gebruik standaard const. Pas als de waarde echt moet kunnen veranderen, gebruik je let.
Zet variabelen die je wilt onthouden tussen klikken altijd buiten de functie. Binnen een functie wordt de variabele elke keer opnieuw aangemaakt en reset hij naar de beginwaarde.
let teller = 0; // buiten de functie: onthoudt de waarde
document.getElementById('knop').addEventListener('click', function() {
teller = teller + 1;
document.getElementById('uitvoer').textContent = teller;
});
Beslissingen
If / else — verschillende acties op basis van een voorwaarde
Met if voer je code alleen uit als een voorwaarde true is. Met else geef je een alternatief op voor als de voorwaarde false is.
if (score > 10) {
document.getElementById('uitvoer').textContent = 'Gewonnen!';
} else {
document.getElementById('uitvoer').textContent = 'Niet genoeg punten.';
}
Voor meerdere gevallen ketting je else if:
if (score >= 90) {
cijfer = 'A';
} else if (score >= 70) {
cijfer = 'B';
} else if (score >= 50) {
cijfer = 'C';
} else {
cijfer = 'Onvoldoende';
}
JavaScript probeert de takken van boven naar beneden en stopt bij de eerste die klopt.
Logische operatoren — &&, ||, !
Combineer meerdere voorwaarden met:
| Operator | Wat | Voorbeeld |
|---|---|---|
&& | EN — beide moeten waar zijn | leeftijd >= 18 && heeftToegang |
|| | OF — minstens één moet waar zijn | dag === 'za' || dag === 'zo' |
! | NIET — keert de waarde om | !isIngelogd |
if (leeftijd >= 18 && heeftToegang) {
console.log('Welkom!');
}
if (dag === 'za' || dag === 'zo') {
console.log('Weekend');
}
if (!isJarig) {
console.log('Niet jarig vandaag');
}
Events
Events met addEventListener
Met addEventListener koppel je een functie aan een event op een element — zonder dat je de HTML hoeft aan te passen. Je kunt meerdere listeners aan hetzelfde element koppelen.
document.getElementById('knop').addEventListener('click', function() {
document.getElementById('status').textContent = 'Geklikt!';
});
Veelgebruikte events:
| Event | Wanneer |
|---|---|
'click' | Muisklik op het element |
'mouseover' | Muis beweegt over het element |
'mouseout' | Muis verlaat het element |
'keydown' | Toets wordt ingedrukt |
Formulier-data ophalen
Invoer uitlezen met .value
Met .value lees je uit wat de gebruiker in een formulierveld heeft getypt of gekozen. Werkt voor <input>, <textarea> en <select>.
const naam = document.getElementById('naam').value; // string
const leeftijd = Number(document.getElementById('lft').value); // number
const keuze = document.getElementById('land').value; // value van <option>
Number() niet.value is altijd een string, ook bij <input type="number">. Zonder Number() plakt + getallen aan elkaar in plaats van op te tellen.
prompt & alert
Snelle input/output — prompt() en alert()
Ingebouwde browser-functies voor snelle demo's:
alert('Hallo wereld!'); // toont popup met OK-knop
const naam = prompt('Hoe heet je?'); // vraagt om invoer
alert('Hoi ' + naam + '!');
prompt()geeft een string terug (ook bij getallen — gebruikNumber(prompt(...))om te rekenen).- Klikt de gebruiker op Cancel, dan is
prompt()gelijk aannull.
Voor een echte website is prompt/alert te storend. Gebruik <input> + .value voor netjes ingebouwde invoer. prompt/alert zijn alleen handig voor mini-demo's.
Loops
Herhaling — for-loop
Een for-loop herhaalt een blok code een vast aantal keer:
for (let i = 0; i < 5; i++) {
console.log('Ronde ' + i);
}
De drie delen tussen haakjes:
let i = 0— beginwaarde van de tellervariabelei < 5— voorwaarde: zolang dittrueis, blijft de loop draaieni++— wat er na elke ronde gebeurt (kort voori = i + 1)
Resultaat: Ronde 0, Ronde 1, ..., Ronde 4.
Herhaling met voorwaarde — while
while draait zolang een voorwaarde true is:
let teller = 0;
while (teller < 5) {
console.log(teller);
teller = teller + 1; // niet vergeten — anders oneindige loop!
}
Vergeet binnenin de loop niet de variabele aan te passen — anders bevriest de browser.
Arrays
Lijsten — [], index, .length, .push()
Een array is een geordende lijst tussen vierkante haken:
const namen = ['Anna', 'Bram', 'Chris'];
console.log(namen[0]); // 'Anna' — eerste item (index 0!)
console.log(namen.length); // 3
namen.push('Daan'); // voeg toe aan einde
namen[0] = 'Anouk'; // vervang eerste item
Items beginnen bij index 0, niet 1.
Combineren met een loop om alle items te bewerken:
for (let i = 0; i < namen.length; i++) {
console.log('Hallo ' + namen[i]);
}
Modern DOM
Selecteren met CSS-syntax — querySelector
document.querySelector(...) selecteert met een CSS-selector — krachtiger dan getElementById:
document.querySelector('#welkom'); // id="welkom"
document.querySelector('.kaart'); // eerste class="kaart"
document.querySelector('button'); // eerste <button>
document.querySelector('.kaart h2'); // h2 binnen .kaart
document.querySelectorAll(...) geeft alle matchende elementen (loop eroverheen):
const knoppen = document.querySelectorAll('button');
for (let i = 0; i < knoppen.length; i++) {
knoppen[i].textContent = 'Klik!';
}
Geeft null terug als er geen match is — check op null voordat je iets doet met het resultaat.
CSS-klassen toevoegen/verwijderen — classList
In plaats van .style.xxx = '...' definieer je je stijl in CSS, en zet/verwijder je een klasse:
const kaart = document.querySelector('.kaart');
kaart.classList.add('actief'); // klasse toevoegen
kaart.classList.remove('actief'); // klasse verwijderen
kaart.classList.toggle('actief'); // aan/uit schakelen
kaart.classList.contains('actief'); // true/false
In CSS definieer je dan twee toestanden:
.kaart { background-color: lightgray; }
.kaart.actief { background-color: gold; }
Schoner dan veel .style-regels.