HTML Afbeeldingen

HTML <img> alt attribuut

  • Het alt attribuut zorgt voor alternatieve informatie betreffende een afbeelding indien deze niet kan worden weergegeven in de browser van de gebruiker,
    bv. een slechte of trage verbinding, een fout in het src attribuut of wanneer er gebruik wordt gemaakt van een schermlezer.
    • Het alt attribuut wordt NIET weergegeven in Google Chrome.
    • Het alt attribuut wordt in de andere browsers op verschillende wijze weergegeven.

Attribuut voorbeeld

<html>
<body>
<img src="html-t-logo.png" alt="html-t logo">
<img src="htmx-t-logo.png" alt="html-t logo">
</body>
</html>
html-t logo correcte weergave html-t logo
fout in src "url"
(geen alt tekst in Google Chrome)

naar boven 

tip

Gebruik altijd de width en height attributen, zodat er genoeg ruimte is voor het plaatsen van de alt tekst !

Attribuut waarde

Waarde Beschrijving
tekst Alternatieve tekst voor een afbeelding.
  • een afbeelding met informatie - beschrijf de informatie
  • een afbeelding als link - beschrijf de bestemming van de link
  • een afbeelding als decoratie - gebruik alt=""

Opbouw

<img src="url" alt="tekst"> In HTML
<img src="url" alt="tekst" /> In XHTML

naar boven 

nota

In Internet Explorer wordt de tekst ook weergegeven als tooltip (een klein venster met extra informatie) wanneer de muisaanwijzer zich boven de afbeelding bevindt.
Dit is NIET correct volgens de HTML regels.

tip

Om een tooltip te tonen bij een afbeelding maakt men gebruik van het title attribuut!

Browser ondersteuning

Internet Explorer Firefox Chrome Opera Safari

  • Het <img> alt attribuut wordt NIET ondersteund in Google Chrome.
  • De verschillende browsers geven het alt attribuut op hun eigen wijze weer !
naar boven naar boven naar src attribuut
naar boven naar het src attribuut