HTML Referenzhandbuch

Vollständiges Verzeichnis der HTML-Tags

HTML: <img> Tag

Der HTML <img>-Tag definiert ein Bild im HTML-Dokument. Dieser Tag wird auch als <img>-Element bezeichnet.

Online example

How to insert an image:

Example

!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial Network(oldtoolbag.com)</title>　
</head>
<body>
<img src="pig.gif" alt="pig face" width="32" height="32">
</body>
</html>

Test and see ‹/›

Browser compatibility

IEFirefoxOperaChromeSafari

All mainstream browsers support the <img> tag.

Difference between image alt and title attributes:

The alt attribute in the image is the text hint displayed when the image cannot be displayed normally.
The title attribute in the image is the text hint displayed when the mouse moves over the element.

Definition and usage instructions

The <img> tag defines an image in an HTML page.

The <img> tag has two required attributes: src and alt.

The <img> tag may support the following image formats: jpeg, gif, png, apng, svg, bmp, bmp ico, png ico (depending on the browser).

Note:Technically, the image is not inserted into the HTML page but linked to the HTML page. The <img> tag creates a placeholder for the referenced image.

Tip:By nesting <img> tags within <a> tags, add links to another document for the image.

HTML 4.01 Compared to HTML5Differences

HTML5 The following attributes are not supported: align, border, hspace, longdesc, vspace.

In HTML 4.01 In the following attributes: align, border, hspace, vspace are deprecated.

Differences between HTML and XHTML

In HTML, the <img> tag does not have a closing tag.
In XHTML, the <img> tag must be closed correctly.

Attribute

New: HTML5 New attribute added to

Attribute	Value	Description
align	top 　bottom 　middle 　left 　right	HTML5 Nicht unterstützt. HTML 4.01 Veraltet. 　　Define how the image is aligned according to the surrounding text
alt	text	Define the alternative text of the image
border	Pixel	HTML5 Nicht unterstützt. HTML 4.01 Veraltet. 　　Define the border around the image
crossoriginHTML5	anonymous use-credentials	Set the cross-domain attribute of the image
height	Pixel	Define the height of the image.
hspace	Pixel	HTML5 Nicht unterstützt. HTML 4.01 Veraltet. 　　Definiert den Abstand links und rechts des Bildes.
ismap	ismap	Definiert das Bild als Server-seitiges Bildmapping.
longdesc	URL	HTML5 Nicht unterstützt. HTML 4.01 Veraltet. 　　Weist die URL zu, die eine lange Bildbeschreibung enthält.
src	URL	Definiert die URL, die das Bild anzeigt.
usemap	#mapname	Definiert das Bild als Client-seitiges Bildmapping.
vspace	Pixel	HTML5 Nicht unterstützt. HTML 4.01 Veraltet. 　　Definiert den Abstand oben und unten des Bildes.
Breite	Pixel	Definiert die Breite des Bildes.

Globale Attribute

<img> Tag unterstützt HTML globale Attribute.

Ereignisattribute

<img> Tag unterstützt HTML Ereignisattribute.

Versuchen Sie den Online-Beispiel

Anordnen Sie das Bild
Dieser Beispiel zeigt, wie man Bilder im Text anordnet.

Schwebendes Bild
Dieser Beispiel zeigt, wie man ein Bild links oder rechts im Absatz positioniert.

Einstellen Sie den Bildlink
Dieser Beispiel zeigt, wie man ein Bild als Link verwendet.

Erstellen Sie ein Bildmapping
Dieser Beispiel zeigt, wie man ein Bild mit einem klickbaren Bereich erstellt. Jeder Bereich ist ein Hyperlink.