Mit dem Bild-Element kommt ein Bild in die Seite. Zwei Attribute sind dabei entscheidend: die Quelle und der Alternativtext.
- Bild-Element (img)
Element, das eine Bilddatei in das Dokument einbettet.
Beispiel: „Ein Bild-Element hat keinen Inhalt und kein schließendes Tag.“Auch: img-Element.
Die beiden Attribute
Die Spezifikation beschreibt die Einbindung knapp: use the img element and its src attribute. Dazu kommt der Alternativtext, der das Bild ersetzt, wenn es nicht ankommt oder nicht gesehen wird.
<img src="/bilder/team.jpg" alt="Vier Personen am Besprechungstisch" width="1200" height="800">Breite und Höhe sind kein Gestaltungsmittel, sondern eine Angabe über die Datei. Der Browser reserviert damit den Platz, bevor das Bild geladen ist, und die Seite springt beim Laden nicht.
Wann alt leer bleibt
Nicht jedes Bild trägt Information. Für Bilder, die den Text nur verstärken, verlangt die Spezifikation ausdrücklich ein leeres Attribut: the alt attribute must be present but its value must be the empty string. Dasselbe gilt für ein Symbol neben einem gleichbedeutenden Text.
Leer ist dabei etwas anderes als weggelassen. Fehlt das Attribut ganz, lesen manche Screenreader den Dateinamen vor. Ist es leer, wird das Bild übergangen, und genau das ist bei Schmuck richtig.
Dekoration gehört ins Stylesheet
Für Bilder ohne Informationswert sagt die Spezifikation, sie sollten über CSS eingebunden werden, not in the markup of the document. Ein Hintergrundmuster oder ein Zierbalken hat im Inhalt nichts verloren.