Vordefinierte Größen und nur text-ersetzende alt-Attributangaben bei nicht angezeigten Grafiken
An einer gewünschten Stelle können Sie eine Grafik referenzieren.
<div> <img src="paris.jpg" alt="Paris" width="240" height="180"> <img src="london.jpg" alt="London" width="240" height="180"> </div> <p>Ein <img src="../smiley.gif" alt=""> ist ein Smiley.</p> <h1>Die Tänzerin</h1> <img src="taenzerin.png" alt="" width="142" height="340">
Eine Grafikreferenz wird durch ein <img>-Tag markiert (img = image = Bild). Es handelt sich um ein Standalone-Tag, d.h. in XHTML sollte es in der Form <img … /> notiert werden. Die Grafik wird an der Stelle im Text platziert, an der das Element notiert ist. Das Element erzeugt keine neue Zeile im Textfluss. Im obigen Beispiel ist das besonders bei der Code-Passage <p>Ein <img src="../smiley.gif"> ist ein Smiley.</p> sichtbar. Hier erscheint die Grafik mitten im Text. Per Voreinstellung wird sie untenbündig zur Schrift-Basislinie ausgerichtet.
Die Grafikdatei, die referenziert werden soll, geben Sie im src-Attribut an. Es gibt HTML-seitig keine festen Vorschriften dafür, welche Grafikformate möglich sind. Was Pixelgrafikformate betrifft, erwarten Browser jedoch in der Praxis eines der drei Formate GIF, JPEG und PNG (siehe auch Pixelgrafikformate). Der HTML5-Standard sieht jedoch auch vor, <img src…> zum einfachen Referenzieren von SVG-Vektorgrafiken zu verwenden (siehe dazu SVG-Grafikreferenzen).
Bei der Wertzuweisung an das src-Attribut gelten alle Möglichkeiten, die im Abschnitt über Referenzierung beschrieben sind. Sie können also lokal gespeicherte Grafikdateien referenzieren, aber auch solche von anderen Webservern. Sie können lokal gespeicherte Grafiken absolut oder relativ adressieren. Beispiele:
<img src="verzeichnis/datei.gif">
<img src="verzeichnis/unterverz/datei.gif">
<img src="../datei.gif">
<img src="../../../datei.gif">
<img src="../woanders/datei.gif">
<img src="http://www.example.org/grafiken/datei.gif">
Mit den Attributen width und height können Sie die Breite und Höhe der Grafik in Pixeln angeben. Diese Attribute sind nicht dazu gedacht, um die Grafik zu strecken, auch wenn Browser das in aller Regel unterstützen. Geben Sie bei diesen Attributen die tatsächliche Breite und Höhe der Grafik an. Damit unterstützen Sie den Browser beim Bildschirmaufbau, während er die Webseite lädt. Er muss dann nämlich nicht warten, bis er die entsprechende Header-Information der Grafikdatei auslesen kann. Stattdessen kann er die Webseite bereits am Bildschirm aufbauen und bei noch nicht eingelesenen Grafiken erst mal eine entsprechend große Freifläche anzeigen.
Das alt-Attribut enthält den sogenannten Fallback-Text, falls die Grafik nicht geladen oder nicht angezeigt werden kann. Dabei hat das Attribut nicht die Aufgabe, den Inhalt der Grafik zu beschreiben, sondern lediglich die Grafik zu ersetzen, falls diese nicht angezeigt werden kann. Beispiele:
<img src="cartoon.png">
Das ist die französische Fahne: <img src="fahne-fr.gif" alt="">
Reiseziel: <img src="fahne-fr.png" alt="Frankreich">
Im ersten Fall fehlt das alt-Attribut, weil die Grafik, zum Beispiel ein Cartoon oder Comic Strip, den eigentlichen Inhalt transportiert. Es gibt keine Möglichkeit, diesen Inhalt in Textform alternativ wiederzugeben (wie schon erwähnt: Alternativtext hat nicht die Aufgabe, prosaische Beschreibungen zu liefern).
Im zweiten Fall wird das alt-Attribut notiert, jedoch leer gelassen. Diese Notationsform soll dann verwendet werden, wenn aus dem unmittelbaren Nachbarinhalt hervorgeht, worin der Inhalt der Grafik besteht. Die Zuweisung eines leeren Inhalts bedeutet also: der Kontext ist eindeutig, und die Grafik visualisiert diesen Kontext lediglich. Geeignet ist diese Form also für alle Arten von unmittelbarer Illustration oder Symbolisierung.
Im dritten Fall enthält das alt-Attribut einen Inhalt. Der Grund ist, dass die Grafik in diesem Fall anstelle eines Textes notiert ist. Der Alternativtext ist in diesem Fall der natürliche Ersatzinhalt für die Grafik.
Achten Sie bei der Wertzuweisung an das src-Attribut unbedingt auf Groß-/Kleinschreibung von Dateinamen und Verzeichnisnamen. Viele Server-Rechner laufen mit Betriebssystemen, bei denen streng zwischen Groß- und Kleinschreibung unterschieden wird. Am einfachsten und sichersten ist es, wenn Sie alle Datei- und Verzeichnisnamen kleinschreiben — sowohl beim Vergeben der Namen als auch beim Referenzieren.
Die referenzierte Quelle muss nicht zwangsläufig eine statische Grafikdatei sein. Es kann sich auch um ein serverseitiges Script handeln, dass den Binärcode einer Grafik zum Beispiel auf Basis aktueller Daten generiert. Der gesendete Code muss jedoch einem der erwarteten Dateiformate entsprechen.
Dank der absoluten URL-Adressierung können Sie in einem eigenen <img>-Tag beliebige fremde Grafiken aus dem Web referenzieren. Dies kann jedoch eine Urheberrechtsverletzung unde ein Verstoß gegen lizenzrechtliche Nutzungsbedingungen darstellen, da die Grafik für den Anwender in Ihrer Webseite so erscheint, als handele es sich um Ihren eigenen Inhalt. Klären Sie also bei jeder Referenzierung von Grafiken von Fremdanbietern zunächst, ob die Referenzierung rechtlich zulässig ist.
Im HTML-4.01-Standard war das alt-Attribut in jedem Fall Pflicht. HTML5 hat die Pflichtnotation abgeschafft, betont aber die Bedeutung des Attributs. Hintergrund der etwas verkrampft anmutenden Definitionen zum alt-Attribut sind zum Teil heftige Auseinandersetzungen unter Experten. Das alt-Attribut ist nämlich seit jeher eine Art Inbegriff für ein Minimum an Barrierefreiheit beim Erstellen von Webseiten.
Der Internet Explorer zeigt den Alternativtext als Tooltip an, wenn man mit dem Mauszeiger länger über der Grafik verweilt. Dieses Verhalten ist nicht im Sinne des alt-Attributs, dessen Wert nur angezeigt werden soll, wenn die Grafik nicht verfügbar ist. Wenn Sie ihre Grafiken mit erklärenden Tooltips versehen wollen, nutzen Sie das Attribut title. Dieses Attribut ist ein globales Attribut.
Der Internet Explorer gibt dem title-Attribut bei Tooltip-Anzeige übrigens auch Vorrang vor dem alt-Attribut. Verwenden Sie deshalb title="", um die Tooltip-Anzeige des alt-Attributs im Internet Explorer ganz zu unterdrücken.
Die in HTML 4.01 erlaubten Attribute border und longdesc sind in HTML5 ersatzlos gestrichen worden. Das border-Attribut lässt sich durch eine entsprechende CSS-Definition ersetzen. Anstelle des longdesc-Attributs wird die Verwendung des figure-Elements empfohlen (siehe Buchabschnitt Abbildungen).
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.