Bilder mit dem img-Element - HTML Referenz
Anzeige Hier werben
Mit dem img-Attribut werden Bilder in Webseiten eingebunden.
Beispiel
1 | <img src="/editor/sample-image/" alt="ein Ausschnitt aus einer schwarzen Tastatur" />
|
Pflichattribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| src | URL | Die Adresse des Bildes |
| alt | Text | Eine Kurze Beschreibung des Bildes |
src
Das src-Attribut gibt die Adresse wo sich das Bild befindet an.
alt
Das alt-Attribute gibt einen Alterntivtext für den Inhalt des Bildes an. Der Text wird angezeigt, wenn das Bild nicht dargestellt werden kann, da entweder Bilder im Browser deaktiviert sind, das Bild nicht verfügbar ist, oder der Benutzer sehbehindert ist.
Es ist ein Pflichtattribut und muss somit bei jedem Bild angegeben werden. Damit soll sichergestellt werden, dass Webseiten barrierefrei gestaltet werden.
Ist das Bild ein reines Schmuckelement der Seite und hat somit keine inhaltliche Bedeutung, sollte ein leeres alt-Attribut (alt="") zugewiesen werden.
In HTML5 wird das alt-Attribut wahrscheinlich optional: Das alt-Attribut soll man dann weglassen dürfen, wenn das Bild zwar eine inhaltliche Bedeutung hat, es aber der Inhalt nicht beschrieben werden kann (z.B. sinnvol bei Fotogalerien, wo sich kein Benutzer die Mühe mach alle Bilder zu beschriften). Siehe dazu die Begründung im im WHATWG Blog.
Im Internet Explorer wird das alt-Attribut auch als Tooltip angezeigt wenn über die Maus über dem Bild verweilt. Dies kann verhindert werden indem man dem Bild explizit ein (evtl. leeres) title-Attribut zuweist.
Optionale Attribute
| Attribut | Wert | Beschreibung | Beispiel |
|---|---|---|---|
| width | pixels, % | Setzt die Breite des Bildes |
width="60px", width="10%" |
| height | pixels, % | Setzt die Höhe des Bildes | height="50px, height="10%" |
| longdesc | URL | Adresse eines Dokuments, dass eine lange Beschreibung des Bildes enthält |
longdesc="beschreibung.htm |
| ismap | URL | Serverseitiger Verweis von sensitiven Grafiken | ismap |
| usemap | URL |
Die veralteten präsentativen Attribute align, border, hspace und vspace sollten nicht mehr verwendet werden und stattdessen mit CSS zugewiesen werden.
Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 2 Personen an der Seite "Bilder mit dem img-Element - HTML Referenz" mitgewirkt.
Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Bilder mit dem img-Element - HTML Referenz" hier bearbeiten.
-
arbeitet seit längerem als Webdesigner und vor allem -entwickler. Er ist Webmaster von Webmasterpro.de und leitet den Flashcounter-Service.
-
Hin und wieder erstelle ich im privaten Bereich kleine Webseiten bzw. setze ein/e CMS/Boardsoftware auf und konfiguriere sie.