Wat is het verschil tussen class en id?

In HTML kun je elementen een naam geven met attributen zodat je ze later in CSS of JavaScript kunt aanspreken. De twee belangrijkste zijn class en id.

• class: gebruik je om meerdere elementen dezelfde stijl of gedrag te geven.
• id: gebruik je voor één uniek element op de pagina.

Stappenplan:

1. Bepaal of een stijl voor meerdere elementen geldt → gebruik class.
2. Bepaal of een stijl slechts voor één element geldt → gebruik id.
3. Schrijf in CSS een selector met . voor class en # voor id.
4. Test in de browser of de styling klopt.

Voorbeeld met class:

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

CSS:

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

Voorbeeld met id:

<h1 id="hoofdtitel">Welkom op mijn site</h1>

CSS:

#hoofdtitel {
  font-size: 2rem;
  text-transform: uppercase;
}

Id gebruiken als link (anker):

Je kunt met een id naar een specifiek deel van de pagina springen. Wanneer je op de link klikt, springt de browser direct naar de sectie met id="contact". Dit kan alleen omdat een id uniek is. Als dit niet het geval is, dan weten we niet waar we naartoe moeten springen.

<a href="#contact">Ga naar contact</a>

... inhoud van de website ...

<h2 id="contact">Contact</h2>
<p>Stuur me een bericht via dit formulier…</p>

Veelgemaakte fouten

• Id gebruiken voor meerdere elementen → een id moet uniek zijn.
• Classes vergeten hergebruiken → maak niet tien verschillende classes voor dezelfde stijl.
• Id’s gebruiken voor styling → meestal gebruik je classes voor styling, en id’s alleen voor unieke identificatie of ankers.