HTMLhulp.nl logo
HTML-attributen uitgelegd: van id tot aria-label

HTML-attributen uitgelegd: van id tot aria-label

HTML-attributen uitgelegd: van id tot aria-label

Wanneer je HTML schrijft, werk je met elementen zoals <p>, <h1>, <a> en <img>. Maar de echte kracht van HTML zit in de attributen. Attributen voegen extra informatie toe aan elementen: een link krijgt een bestemming, een afbeelding een beschrijving en een formulier een naam. Zonder attributen zou HTML maar weinig betekenis hebben. In dit artikel leer je wat attributen zijn, welke soorten er bestaan en hoe je ze op de juiste manier gebruikt.

Wat zijn HTML-attributen?

Een attribuut is een eigenschap van een HTML-element. Het staat altijd in de starttag en bestaat uit een naam en een waarde.

Voorbeeld:

<a href="https://htmlhulp.nl">Bezoek HTMLhulp</a>

Hier is href="https://htmlhulp.nl" het attribuut. Het vertelt de browser waar de link naartoe gaat.

Algemene regels voor attributen

  • Attributen komen altijd in de starttag.

  • Ze bestaan uit een naam en een waarde, gescheiden door een =.

  • De waarde staat meestal tussen aanhalingstekens.

Voorbeeld:

<img src="foto.jpg" alt="Foto van een hond">

Belangrijke basisattributen

1. id

Met het attribuut id geef je een element een unieke naam op de pagina. Dit is handig voor:

  • CSS-styling

  • JavaScript-selecties

  • Links naar een specifiek deel van de pagina

<p id="intro">Welkom op mijn website</p>

Je kunt hierna in CSS verwijzen naar #intro.

2. class

Met class geef je een element een of meerdere groepen mee. Zo kun je meerdere elementen tegelijk stylen of selecteren.

<p class="highlight">Dit stuk tekst valt op.</p>

In CSS:

.highlight {
background: yellow;
}

3. src

Het src-attribuut gebruik je vooral bij afbeeldingen, audio, video en scripts. Het geeft de bron aan.

<img src="logo.png" alt="Bedrijfslogo">
<script src="script.js"></script>

4. href

Specifiek voor links (<a>). Hiermee geef je aan waar de link naartoe gaat.

<a href="https://htmlhulp.nl">Ga naar HTMLhulp</a>

5. alt

Een van de belangrijkste attributen voor toegankelijkheid. Het geeft een alternatieve tekst voor een afbeelding.

<img src="kat.jpg" alt="Zwarte kat op een vensterbank">

6. title

Voegt extra informatie toe die zichtbaar wordt als een gebruiker met de muis over het element gaat.

<p title="Dit is een extra uitleg">Beweeg je muis over deze tekst</p>

7. lang

Zet je bovenaan in de <html>-tag om de taal van de pagina aan te geven.

<html lang="nl">

8. style

Je kunt inline CSS toevoegen met het attribuut style. Dit wordt afgeraden voor grote projecten, maar is soms handig voor snelle tests.

<p style="color: red;">Deze tekst is rood</p>

Formuliergerelateerde attributen

  • name: geeft een invoerveld een naam zodat het formulier correct wordt verwerkt.

  • value: de standaardwaarde van een veld of knop.

  • placeholder: grijze tekst die verdwijnt zodra je begint te typen.

  • required: maakt een veld verplicht.

  • disabled: schakelt een veld uit.

Voorbeeld:

<input type="text" name="gebruikersnaam" placeholder="Vul je naam in" required>

Media-attributen

Voor afbeeldingen, audio en video zijn er extra attributen:

  • width en height: bepalen de afmetingen.

  • controls: voegt knoppen toe bij audio en video.

  • autoplay: laat media automatisch starten (niet altijd aan te raden).

  • loading="lazy": laadt afbeeldingen pas in als ze in beeld komen.

<img src="foto.jpg" alt="Vakantiefoto" width="600" height="400" loading="lazy">

ARIA-attributen

ARIA staat voor Accessible Rich Internet Applications. Deze attributen maken dynamische elementen begrijpelijker voor schermlezers.

  • aria-label: voegt een alternatieve beschrijving toe.

  • aria-hidden="true": verbergt iets voor schermlezers.

  • aria-expanded="true/false": geeft aan of een menu open of dicht is.

Voorbeeld:

<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" hidden>
<li><a href="/home">Home</a></li>
<li><a href="/contact">Contact</a></li>
</ul>

Data-attributen

Met data-* kun je eigen informatie opslaan in HTML. Dit is handig voor JavaScript.

<button data-product-id="123">Bestel</button>

In JavaScript kun je dit uitlezen:

const knop = document.querySelector("button");
console.log(knop.dataset.productId); // 123

Boolean attributen

Sommige attributen hebben geen waarde nodig: ze zijn óf aanwezig, óf niet. Voorbeelden:

  • checked

  • disabled

  • required

  • readonly

<input type="checkbox" checked>

Veelgemaakte fouten bij attributen

  1. Attributen vergeten die essentieel zijn, zoals alt bij afbeeldingen.

  2. Spaties of hoofdletters gebruiken in attributen (HTML is hier gevoelig voor).

  3. Te veel inline style gebruiken in plaats van CSS-bestanden.

  4. id hergebruiken op meerdere elementen (id moet uniek zijn).

  5. ARIA gebruiken waar gewone HTML al genoeg is.

Tips voor slim gebruik van attributen

  • Gebruik altijd semantische attributen eerst (alt, lang, title).

  • Houd je HTML schoon en herbruikbaar door klassen slim in te zetten.

  • Gebruik data-attributen om extra info mee te geven aan scripts.

  • Zorg dat ARIA een aanvulling is, geen vervanging.

  • Test je code met een validator om fouten te vinden.

Met attributen voeg je lagen van betekenis, interactie en toegankelijkheid toe aan je HTML. Zonder attributen zou HTML maar een kale verzameling tags zijn; met attributen maak je van die tags een rijke en bruikbare website.