Element-Referenz
HTML 5 doctype - weil html einfach einfach ist.
nach oben

    <img>

    Bedeutung

    Referenzierte und eingebettete Grafik


    Notation

    <img [Attribute]>[Elementinhalt]</img>

    Elternelemente

    Kann gemäß der HTML5 Spezifikation innerhalb der folgenden Elemente vorkommen:

    Liste der HTML 5 Block-ElementeBlock-Elemente und Liste der HTML 5 Inline-ElementeInline-Elemente - ausgenommen zum <pre> Element<pre>.


    Elementinhalt

    void-Element, darf keinen End-Tag haben und ist ohne Inhalt.


    Attribute

    Kann folgende elementspezifische Attribute enthalten:
    zum HTML5 Attribut altalt | zum HTML5 Attribut heightheight | zum HTML5 Attribut ismapismap | zum HTML5 Attribut srcsrc | zum HTML5 Attribut usemapusemap | zum HTML5 Attribut widthwidth

    Des Weiteren kann das Element folgende allgemeinen Attribute und Event-Handler enthalten:
    zum HTML5 Attribut accesskeyaccesskey | zum HTML5 Attribut classclass | zum HTML5 Attribut contenteditablecontenteditable | zum HTML5 Attribut contextmenucontextmenu | zum HTML5 Attribut datadata | zum HTML5 Attribut dirdir | zum HTML5 Attribut draggabledraggable | zum HTML5 Attribut hiddenhidden | zum HTML5 Attribut idid | zum HTML5 Attribut itemitem | zum HTML5 Attribut itempropitemprop | zum HTML5 Attribut langlang | zum HTML5 Attribut spellcheckspellcheck | zum HTML5 Attribut stylestyle | zum HTML5 Attribut subjectsubject | zum HTML5 Attribut tabindextabindex | zum HTML5 Attribut titletitle

    onabort | onblur | onchange | onclick | oncontextmenu | ondblclick | ondrag | ondragend | ondragenter | ondragleave | ondragover | ondragstart | ondrop | onfocus | onkeydown | onkeypress | onkeyup | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onmousewheel | onscroll


    Beispiel
    <p>Das HTML5 Logo <img src="http://static.html5-webdesign.de/img/HTML5_Logo_256.png" alt="HTML5 Logo" height="225" width="192" /> finden Sie auf der <a href="http://www.w3.org/html/logo/" title="W3C HTML5 Logo">HTML5 Logo-Seite des W3C</a>.</p>
    
    Anzeigebeispiel

    Das HTML5 Logo HTML5 Logo finden Sie auf der W3C HTML5 LogoHTML5 Logo-Seite des W3C.

    Erläuterung

    Eine Grafikreferenz wird durch ein <img>InformationBedeutung: <img>image; Bild Element definiert und die anzuzeigende Grafikdatei wird durch die Wertzuweisung im src Attribut referenziert.

    Diese Referenzierung kann sowohl auf Grafikdateien die sich auf anderen Webservern befinden wie auch auf lokal gespeicherte Grafikdateien erfolgen, wobei letztere mit absoluten oder relativen Pfadangaben adressiert werden können.

    <img src="datei.png" />
    <img src="/datei.png" />
    <img src="verzeichnis/datei.png" />
    <img src="../datei.png" />
    <img src="verzeichnis/unterverzeichnis/datei.png" />
    <img src="/../../datei.png" />
    <img src="http://www.example.org/verzeichnis/datei.png" />

    Das <img> Element erzeugt dabei keine neue Zeile im Textfluss und positioniert die anzuzeigende Grafikdatei, gemäß Voreinstellung unten bündig zur Schrift-Baseline, an der Stelle im Text, an der das Element notiert wurde. Die Attribute width und height definieren die tatsächliche Breite und Höhe der Grafik in Pixel und sind nicht zur Größenänderung vorgesehen, auch wenn Browser in der Regel die anzuzeigende Grafikdatei entsprechend der Wertezuweisung verkleinern bzw. vergrößern.

    Das alt Attribut definiert den Alternativtext für den Fall, dass Grafik nicht geladen oder nicht angezeigt werden kann. Das alt Attribut hat jedoch nicht die Aufgabe, den Inhalt der Grafik zu beschreiben. Gemäß der HTML5 Spezifikation wurden spezifischere Regel für das alt Attribut definiert:

    <img src="foo" alt="bar" />
    Das alt Attribut enthält einen Inhalt - die Grafik ist anstelle eines Textes notiert ist. Der Alternativtext ist somit der natürliche Ersatzinhalt für die Grafik.
    <img src="foo" alt="" />
    Das alt Attribut enthält keinen Inhalt - diese Notationsform soll verwendet werden, wenn aus dem unmittelbaren Nachbarinhalt hervorgeht, worin der Inhalt der Grafik besteht. Die Zuweisung eines leeren Inhalts bedeutet das der Kontext eindeutig ist, und die Grafik diesen lediglich visualisiert. Geeignet ist diese Form somit für alle Arten von unmittelbarer Illustration oder Symbolisierung.
    <img src="foo" />
    Das alt Attribut entfällt -für die Grafik ist kein Äquivalent verfügbar, sodass es keine Möglichkeit gibt den Inhalt in Textform alternativ wiederzugeben. (Beispiel: Comic oder Cartoon)
    <img src="foo" title="bar" />
    Das title Attribut als Ersatz-Legende.

    Mit Einführung der HTML5 Spezifikation wurde die Pflichtnotation des alt Attributs aufgehoben, trotz allem sollte das alt Attribut, um ein Minimum an Barrierefreiheit zu schaffen, ausgezeichnet werden. Ebenso wurden die Attribute border und longdesc in der HTML5 Spezifikation ersatzlos gestrichen.


    W3C Logo & WHATWG Logo Spezifikation

    Tastaturkürzel