HTML-Tag <img>

❮ Vorige Nächste ❯

Das Tag <img> wird in HTML für die Beschreibung von Bildern verwendet. Das Bild selbst wird im Dokument nicht direkt platziert, der Browser lädt es aus seiner Quelle, die im Tag <img> eingegeben ist. Für die Eingabe der Quelle wird das Attribut src verwendet.

Es gibt zwei erforderliche Attribute für das Element <img>: src, das zur Anzeige der Bildquelle verwendet wird, und alt, das einen alternativen Text für das Bild definiert.

Um HTML-Bilder klickbar zu machen, sollen Sie das Tag <img> im Tag <a> platzieren. Das Tag <a> wird zum Einfügen von Links verwendet.

Syntax

Das Tag <img> wird ungepaart verwendet, kein Endtag ist notwendig.

Beispiel

<!DOCTYPE html>
<html>
   <head>
       <title>Der Titel des Dokuments</title>
   </head>
   <body>
      <h1>Titel</h1>
      <p>Das ist Aleqs Foto</p>
     <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
  </body>
</html>

Versuch es selber!

Ergebnis

Attribute

Das Attribut src (source) ist obligatorisch, da es auf den Weg zum Bild hindeutet. Der Wert des Attributes src kann der Name der Datei sowie ihre URL sein.

Das Attribut alt ist für das Tag <img> auch obligatorisch. Sein Wert ist ein Erklärungstext, der vor dem Hochladen des Bildes im Browser angezeigt wird. Der Browser zeigt diesen Text auch bei der Mausbewegung auf dem Bild an.

Wir empfehlen Ihnen, im Alternativtext Schlüsselwörter einzuschließen. Das erlaubt, die Klassifizierung der Webseite in den Suchsystemen zu verbessern.

Attribute

Attribut	Wert	Beschreibung
align	left right top bottom middle	Es definiert die Ausrichtung des Bildes bezüglich der Elemente um es. Es wird in HTML5 nicht unterstützt.
alt	text	Es definiert den alternativen Text für das Bild.
border	pixels	Es definiert den Umfang des Rahmens um dem Bild. Es wird in HTML5 nicht unterstützt.
crossorigin
		Es definiert, ob CORS (diese Technologie erlaubt der Webseite, Zugang zur Quelle des andern Dokuments zu bekommen) beim Beladen des Bildes verwendet wird. Die mit CORS beladene Bilder können im Element <canvas> ohne Funktionsbeschränkungen eingetragen werden.
	anonymous	Die CORS-Anfragen werden keine Anmeldedaten beim Gebrauch dieses Elements übergegeben.
	use-credentials	Die CORS-Anfragen werden die Anmeldedaten beim Gebrauch dieses Elements übergegeben. Neues Attribut in HTML5.
height	pixels	Es definiert die Höhe des Bildes.
hspace	pixels	Es stellt Leerzeichen von links und rechts des Bildes ein. Es wird in HTML5 nicht unterstützt.
ismap	ismap	Es definiert, dass der Inhalt des Tages die Serverkarte des Bildes ist.
longdesc	URL	Es definiert die URL-Adresse mit einer ausführlichen Beschreibung des Bildes (für die kurze Beschreibung des Bildes wird das Attribut alt) verwendet. Es wird in HTML5 nicht unterstützt.
src	URL	Es definiert die Quelle des Bildes.
usemap	#mapname	Es bestimmt den Link des Elements <map>, das die Koordinate für Bilderkarte des Kunden enthält.
vspace	pixels	Es definiert die Leerzeichen von oben und unten um das Bild. Es wird in HTML5 nicht unterstützt.
width	pixels	Es definiert die Breite des Bildes.