XHTML5.NL

<img>-element (X)HTML

  • HTML 2.0+
  • XHTML 1.0+
  • IE 1.0+
  • Chrome 1.0+
  • Firefox 1.0+
  • Safari 1.0+
  • Opera 2.1+

Het <img>-element plaatst een afbeelding in het document. Het is een inline element. Het src-attribuut is verplicht en het alt-attribuut meestal ook.

  • <img … />
  • HTML 2.0+
  • XHTML 1.0–1.1, 5+
  • IE 1.0+ *
  • Chrome 1.0+
  • Firefox 1.0+
  • Safari 1.0+
  • Opera 3.2+

alt-attribuut

Het alt-attribuut specificeert alternatieve tekst voor de afbeelding. Tenzij het absoluut onmogelijk is om een alternatieve tekst te leveren (zoals een captcha-test of een afbeelding op een uploadsite), is dit attribuut verplicht.

Belangrijk is te beseffen dat een alternatieve tekst een gelijkwaardig equivalent dient te zijn van de afbeelding en niet een beschrijving of een bijschrift. De afbeelding moet uit het document verwijderd kunnen worden en de alternatieve tekst op die plaats ingevoegd en daarna moet het volledige document nog steeds vloeiend leesbaar zijn.

Ook belangrijk is dat het alt-attribuut leeg kan zijn. Dit heeft een andere betekenis dan wanneer het afwezig is. Een leeg attribuut geeft aan dat de afbeelding niet meer informatie geeft dan toch al in het document stond: de afbeelding helpt dan iets sneller te begrijpen, maar bij het weghalen van de afbeelding gaat niks verloren.

Indien dit attribuut om een geldige reden afwezig is, wordt een bijschrift verplicht. Dit kan via het title-attribuut, het <dt>-element van hetzelfde <figure>-element of een <h…>-element met de afbeelding als enige bijbehorende inhoud.

Tot (X)HTML5 was het alt-attribuut onder alle omstandigheden verplicht.

Internet Explorer geeft het alt-attribuut als tooltip weer indien het title-attribuut niet is gebruikt. Dit gedrag is incorrect.

  • <img alt="…" … />

crossorigin-attribuut

Zie de overige attributen voor de beschrijving van het crossorigin-attribuut.

  • HTML 3.2+
  • XHTML 1.0–1.1, 5+
  • IE 1.0+
  • Chrome 1.0+
  • Firefox 1.0+
  • Safari 1.0+
  • Opera 2.1+

height-attribuut

Het height-attribuut specificeert de hoogte van de afbeelding in pixels.

Indien afwezig zal een hoogte in de juiste verhouding tot het width-attribuut worden gekozen. Indien dat attribuut ook afwezig is, worden de nominale afmetingen uit het afbeeldingsbestand gebruikt.

Sinds (X)HTML5 is het verboden om een andere breedte-hoogteverhouding op te geven dan in het afbeeldingsbestand zelf staat. Het gebruik van percentages is ook niet meer toegestaan.

  • <img height="…" … />
  • HTML 2.0+
  • XHTML 1.0–1.1, 5+
  • IE 2.0+
  • Chrome 1.0+
  • Firefox 1.0+
  • Safari 1.0+
  • Opera 2.1+

ismap-attribuut

Indien de afbeelding is opgenomen in een <a>-element, geeft het booleaanse ismap-attribuut aan dat bij het klikken op de afbeelding de coördinaten van de klik meegezonden moeten worden naar de server.

Dit biedt meer mogelijkheden qua vormen dan een normaal <map>-element, maar is veel minder toegankelijk, aangezien de gebruiker uit een gigantisch aantal pixels kan kiezen in plaats van uit een beperkt aantal vormen. Zonder beeldscherm en muis wordt dit dus heel moeilijk kiezen.

De coördinaten worden doorgegeven door aan de URL achtereenvolgens een vraagteken, de x-coördinaat, een komma en de y-coördinaat toe te voegen en vervolgens deze URL te laden.

  • <img ismap="ismap" … />
  • HTML 2.0+
  • XHTML 1.0+
  • IE 1.0+
  • Chrome 1.0+
  • Firefox 1.0+
  • Safari 1.0+
  • Opera 2.1+

src-attribuut

Het src-attribuut specificeert de locatie van het afbeeldingsbestand dat moet worden weergegeven. De waarde heeft de vorm van een koppeling.

  • <img src="…" … />
  • HTML 3.2+
  • XHTML 1.0–1.1, 5+
  • IE 1.0+
  • Chrome 1.0+
  • Firefox 1.0+
  • Safari 1.0+
  • Opera 2.1+

usemap-attribuut

Het usemap-attribuut geeft aan dat de afbeelding aanklikbare gebieden bevat en heeft als waarde een directe koppeling naar een <map>-element dat deze gebieden beschrijft.

De waarde van dit attribuut is dus een URL. Om naar een <map>-element te verwijzen, moeten aan het eind een hekje ('#') en het name-attribuut van het <map>-element worden toegevoegd. Als de <map> in hetzelfde document staat, kun je bij het hekje beginnen en de URL van het document zelf weglaten.

  • <img usemap="…" … />
  • HTML 3.2+
  • XHTML 1.0–1.1, 5+
  • IE 1.0+
  • Chrome 1.0+
  • Firefox 1.0+
  • Safari 1.0+
  • Opera 2.1+

width-attribuut

Het width-attribuut specificeert de breedte van de afbeelding in pixels.

Indien afwezig zal een breedte in de juiste verhouding tot het height-attribuut worden gekozen. Indien dat attribuut ook afwezig is, worden de nominale afmetingen uit het afbeeldingsbestand gebruikt.

Sinds (X)HTML5 is het verboden om een andere breedte-hoogteverhouding op te geven dan in het afbeeldingsbestand zelf staat. Het gebruik van percentages is ook niet meer toegestaan.

  • <img width="…" … />

Geschrapte attributen

De volgende attributen zijn niet meer toegestaan in (X)HTML5, maar waren wel toegestaan in HTML 4 en XHTML 1:

  • HTML 2.0–4.01T
  • XHTML 1.0T
  • IE 1.0+
  • Chrome 1.0+
  • Firefox 1.0+
  • Safari 1.0+
  • Opera 2.1+

align-attribuut

Het align-attribuut gaf de uitlijning van de afbeelding aan. Mogelijke waarden waren "top", "middle", "bottom", "left" en "right".

Vervang dit attribuut één van de CSS-eigenschappen vertical-align en float.

  • <img align="…" … />
  • HTML 2.0–4.01T
  • XHTML 1.0T
  • IE 3.0+
  • Chrome 1.0+
  • Firefox 1.0+
  • Safari 1.0+
  • Opera 2.1+

border-attribuut

Het border-attribuut gaf de dikte van de rand rondom de afbeelding in pixels.

Vervang dit attribuut door de CSS-eigenschap border.

  • <img border="…" … />

hspace-attribuut

Zie de attributen m.b.t. marges voor de beschrijving van het hspace-attribuut.

  • HTML 4.0–4.01
  • XHTML 1.0–1.1
  • IE niet
  • Chrome niet
  • Firefox 1.0–3.5 *
  • Safari niet
  • Opera 10.1+

longdesc-attribuut

Het longdesc-attribuut kon worden gebruikt om naar een document te verwijzen dat de afbeelding beschrijft. De waarde had de vorm van een koppeling en komt vrijwel overeen met de mogelijke waarden van het href-attribuut van <a>-elementen.

In Firefox moest de URL handmatig naar de adresbalk worden gekopieerd om deze te bezoeken.

Vervang dit attribuut door normale koppelingen (<a>-elementen) die naar de beschrijvingen verwijzen.

  • <img longdesc="…" … />
  • HTML 4.01
  • XHTML 1.0T
  • IE 4.0+
  • Chrome 1.0+
  • Firefox 1.0+
  • Safari 1.0+
  • Opera 3.0+

name-attribuut

Het name-attribuut stelde de naam in die gebruikt kan worden om via het HTML-DOM toegang te krijgen tot de afbeelding (via de 'images-verzameling'). Indien aanwezig moest de waarde gelijk zijn aan het id-attribuut.

  • <img name="…" … />

vspace-attribuut

Zie de attributen m.b.t. marges voor de beschrijving van het vspace-attribuut.