Bilder mit dem img-Element - HTML Referenz

0 | 7345 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Bilder mit dem img-Element - HTML Referenz" mit Ihrem Wissen!

Anzeige Hier werben

Mit dem img-Attribut werden Bilder in Webseiten eingebunden.

Beispiel

Beispiel für das einbinden eines bildes  
HTML
1
<img src="/editor/sample-image/" alt="ein Ausschnitt aus einer schwarzen Tastatur" />

Pflichattribute

AttributWertBeschreibung
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

AttributWertBeschreibungBeispiel
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.


Wikiseite bearbeiten

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.

Mitarbeiter
  • 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.