Hoe voeg ik een afbeelding toe?

In HTML voeg je een afbeelding toe met de tag <img>. Deze heeft minimaal twee attributen:

• src = de bron (het pad naar de afbeelding).
• alt = alternatieve tekst die verschijnt als de afbeelding niet geladen kan worden of wordt voorgelezen door een screenreader.

Alt-tekst is belangrijk voor toegankelijkheid en SEO.

Stappenplan:

1. Zet de afbeelding in je projectmap (bijv. in de map images).
2. Gebruik de tag <img> met een src-attribuut dat naar de afbeelding verwijst.
3. Voeg altijd een duidelijke alt-tekst toe die uitlegt wat er te zien is.
4. Test door het bestand tijdelijk te hernoemen: de alt-tekst moet zichtbaar zijn.

Voorbeelden

Afbeelding met alt-tekst:

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

Afbeelding zonder alt (niet aanbevolen):

<img src="images/logo.png">

Decoratieve afbeelding (alt leeg):

<img src="images/decoratie.png" alt="">

Veelgemaakte fouten

• Geen alt gebruiken → niet toegankelijk voor slechtzienden en screenreaders.
• Alt gebruiken voor styling → alt is puur beschrijving, geen design.
• Te lange alt-teksten → houd het kort en beschrijvend (bijv. "Portretfoto docent" i.p.v. "Een hele lange beschrijving van hoe de docent eruitziet in dit specifieke licht").