HTML code op scherm

Elke website die je ooit hebt bezocht, van de eenvoudigste blog tot de meest complexe webapplicatie, is opgebouwd met HTML en CSS. Deze twee technologieën vormen de kern van webontwikkeling en zijn de eerste stap voor iedereen die wil leren hoe websites worden gemaakt. In dit artikel leggen we uit wat HTML en CSS zijn, hoe ze samenwerken, en hoe je er zelf mee aan de slag kunt.

Wat Is HTML?

HTML staat voor HyperText Markup Language en is de standaard opmaaktaal voor het maken van webpagina's. HTML beschrijft de structuur en semantiek van een webpagina met behulp van een systeem van tags en attributen. Elke tag vertelt de browser iets over het element dat erin is opgenomen: is het een kop, een paragraaf, een lijst, een link, een afbeelding of iets anders?

HTML werd oorspronkelijk ontwikkeld door Tim Berners-Lee, de uitvinder van het World Wide Web, in 1991. Sindsdien heeft HTML verschillende versies gekend, van HTML 2.0 in 1995 tot de huidige HTML5, die in 2014 werd gelanceerd en nog steeds wordt bijgewerkt met nieuwe functies.

De Basis van HTML

Een HTML-document heeft een specifieke structuur. Hier is een eenvoudig voorbeeld:

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <title>Mijn Eerste Webpagina</title>
</head>
<body>
    <h1>Welkom op mijn website</h1>
    <p>Dit is mijn eerste webpagina.</p>
</body>
</html>

Dit voorbeeld toont de basisstructuur van elk HTML-document. De <!DOCTYPE html> declaration vertelt de browser dat dit een HTML5-document is. Binnen de <html>-tag vinden we de <head> (met metadata zoals de titel) en de <body> (met de zichtbare inhoud).

Veelgebruikte HTML-tags

Er zijn tientallen HTML-tags, maar hier zijn de meest fundamentele die je zult gebruiken:

Wat Is CSS?

Terwijl HTML de structuur en inhoud van een webpagina definieert, regelt CSS (Cascading Style Sheets) de visuele presentatie. Met CSS kun je de kleuren, lettertypen, layout, animaties en andere visuele aspecten van je website bepalen. CSS maakt het mogelijk om de inhoud (HTML) volledig te scheiden van de presentatie, wat code schoner en onderhoudbaarder maakt.

Zonder CSS zou elke webpagina er hetzelfde uitzien: zwarte tekst op een witte achtergrond, in één standaard lettertype. CSS is wat het web visueel aantrekkelijk en divers maakt.

Hoe Werkt CSS?

CSS werkt met selectors, properties en values. Een selector target een HTML-element, en de properties en values bepalen hoe dat element eruitziet. Bijvoorbeeld:

h1 {
    color: blue;
    font-size: 32px;
}

p {
    color: #333333;
    line-height: 1.6;
}

Dit CSS-regel voorbeeld zegt dat alle <h1>-elementen blauw moeten zijn met een lettergrootte van 32 pixels, en dat alle <p>-elementen donkergrijs moeten zijn met een regelhoogte van 1.6.

CSS Selectors

Er zijn verschillende manieren om HTML-elementen te selecteren in CSS:

Responsive Design met CSS

In het moderne web is het essentieel dat websites er goed uitzien op alle apparaten, van desktopmonitoren tot smartphones. CSS biedt hiervoor media queries, waarmee je verschillende stijlen kunt definiëren voor verschillende schermgroottes:

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

Dit voorbeeld past de stijlen aan wanneer het scherm smaller is dan 768 pixels, wat typisch het breakpoint is tussen desktop en mobiel.

Frameworks en Bibliotheken

Hoewel het mogelijk is om puur HTML en CSS te schrijven, maken veel ontwikkelaars gebruik van frameworks en bibliotheken om sneller en consistenter te werken. Populaire CSS-frameworks zijn Tailwind CSS, dat utility-first class names gebruikt, Bootstrap, dat een uitgebreid componentensysteem biedt, en Foundation, dat bekend staat om zijn toegankelijkheidsfuncties.

Meer Geavanceerde CSS-technieken

Naast de basis biedt CSS ook geavanceerde technieken voor het creëren van visueel indrukwekkende websites. Flexbox en CSS Grid zijn moderne layout-systemen die het maken van complexe, responsieve layouts aanzienlijk vereenvoudigen. Waar je vroeger floats en position: absolute moest gebruiken, kun je met Flexbox items nu eenvoudig uitlijnen in een rij of kolom, terwijl Grid je in staat stelt om tweedimensionale layouts te maken met rijen en kolommen.

CSS Custom Properties (ook wel CSS Variables genoemd) maken het mogelijk om waarden te definiëren die je overal in je stylesheet kunt hergebruiken. Dit maakt het onderhoud van grote CSS-bases een stuk eenvoudiger, omdat je een waarde op één plek hoeft te wijzigen in plaats van overal waar deze wordt gebruikt.

Animaties en transitities in CSS stellen je in staat om vloeiende, visueel aantrekkelijke effecten te creëren zonder JavaScript. Van eenvoudige hover-effecten tot complexe keyframe-animaties, CSS biedt alle tools die je nodig hebt om je website tot leven te brengen.

Conclusie

HTML en CSS zijn de fundamentele bouwstenen van het web. HTML definieert de structuur en inhoud van webpagina's, terwijl CSS bepaalt hoe deze pagina's er visueel uitzien. Samen stellen ze ontwikkelaars in staat om alles te maken, van eenvoudige persoonlijke blogs tot complexe webapplicaties. Door HTML en CSS te leren, open je de deur naar de wereld van webontwikkeling en kun je beginnen met het bouwen van je eigen websites. De principes die je hier leert vormen de basis voor vrijwel elk aspect van webontwikkeling, of je nu doorgaat met JavaScript, backend-ontwikkeling of design.

Gerelateerde Artikelen