HTML: Werken met Classes en ID's

Welkom bij deze les over classes en id's! Je weet waarschijnlijk al hoe je standaard HTML-elementen zoals <h1>, <p> of <div> op je pagina plaatst. Maar wat als je drie verschillende paragrafen hebt en er maar één blauw wil maken? Of wat als je meerdere knoppen op je site dezelfde opmaak wil geven?

Daarvoor gebruiken we de attributen class en id. Ze fungeren als speciale "naamkaartjes" die je aan HTML-elementen hangt, zodat je ze later met CSS (of JavaScript) makkelijk kunt terugvinden en aanpassen.

1. Wat is een Class?

Een class is een label dat je aan meerdere elementen op een pagina kunt geven. Je kunt het vergelijken met een sportteam: meerdere spelers dragen hetzelfde shirt (dezelfde class). Alles met die class krijgt exact dezelfde opmaak of eigenschappen in CSS.

Een class toevoegen in HTML

Je voegt een class toe door het attribuut class="naam" aan je HTML-tag toe te voegen. Verzin zelf logische namen zonder spaties!

<p class="belangrijk">Dit is een heel belangrijke tekst.</p>
<p>Dit is een gewone tekst.</p>
<p class="belangrijk">Dit is ook een belangrijke tekst.</p>

Een class stijlen in CSS

Om in CSS tegen een class te praten, zet je er een punt (.) voor. Zonder die punt denkt CSS dat je een gewone HTML-tag (zoals <body> of <p>) zoekt.

.belangrijk {
    color: red;
    font-weight: bold;
}

Tip: Je kunt een element ook meerdere classes tegelijk geven! Scheid de namen dan gewoon met een spatie in je HTML. Bijvoorbeeld: <div class="kaart groot donker">...</div>.

2. Wat is een ID?

Een id (identifier) is een uniek label. Je kunt het vergelijken met een rijksregisternummer of identiteitskaart: het is uniek per pagina. Je mag een specifieke id dus maar aan één enkel HTML-element geven.

We gebruiken id's vaak voor grote, structurele elementen van een website (zoals de hoofdnavigatie) of voor unieke elementen waar we met JavaScript specifieke acties op willen uitvoeren.

Een id toevoegen in HTML

Je voegt een id toe door het attribuut id="naam" aan je tag toe te voegen.

<h1 id="hoofdtitel">Welkom op mijn portfolio</h1>
<div id="navigatie-balk">
    <!-- Hier komen de navigatie links -->
</div>

Een id stijlen in CSS

Om in CSS een id te selecteren, gebruik je een hashtag (#).

#hoofdtitel {
    font-size: 3rem;
    text-align: center;
    color: #333;
}

#navigatie-balk {
    background-color: #f4f4f4;
    padding: 20px;
}

3. De belangrijkste verschillen op een rij

Het is cruciaal dat je het verschil begrijpt tussen deze twee. Hier is een handig overzicht:

Aantal keer te gebruiken:
Een class mag je zoveel keer gebruiken als je wil op dezelfde pagina.
Een id moet absoluut uniek zijn per pagina.
CSS Selectie:
Een class selecteer je met een . (bijv. .kader)
Een id selecteer je met een # (bijv. #header)
Meerdere tegelijk:
Een element mag meerdere classes hebben (class="rood dik cursief").
Een element mag maar één id hebben (id="hoofd-menu").

Tip: In de praktijk zul je voor styling in CSS veel vaker classes gebruiken dan id's. Id's worden in moderne webdesign-projecten vaak gereserveerd voor JavaScript of om "anchor links" (linken naar een plek op dezelfde pagina) te maken.

4. Korte Samenvatting

Ben je aan het bouwen en weet je niet wat te kiezen? Volg dit simpele stappenplan:

Bepaal welk element je een naam wil geven.
Vraag jezelf af: "Komt deze styling misschien meerdere keren voor op mijn pagina?" Kies dan voor een class. Is het 100% zeker een eenmalig structuur-element? Kies dan voor een id.
Voeg het attribuut toe in je HTML.
Spreek het juiste element aan in je CSS-bestand met een punt of hashtag.

Veel succes met het structureren en stijlen van jouw webpagina's!