HTML Reference Manual

HTML Tag大全

HTML: <img> tag

The HTML <img> tag defines an image in an HTML document. This tag is also commonly referred to as the <img> element.

Online example

How to insert an image:

Example

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial Website(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 of the image is the text hint that appears when the image cannot be displayed normally.
The title attribute of the image is the text hint that appears 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 does not support the following attributes: 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 in

Attribute	Value	Description
align	top 　bottom 　middle 　left 　right	HTML5 Not supported. HTML 4.01 Deprecated. 　　Define how the image is aligned according to the surrounding text
alt	text	Define the alternative text for the image
border	pixels	HTML5 Not supported. HTML 4.01 Deprecated. 　　Define the border around the image
crossoriginHTML5	anonymous use-credentials	Set the cross-domain attribute of the image
height	pixels	Define the height of the image.
hspace	pixels	HTML5 Not supported. HTML 4.01 Deprecated. 　　Specifies the left and right spacing of the image.
ismap	ismap	Specifies the image as a server-side image map.
longdesc	URL	HTML5 Not supported. HTML 4.01 Deprecated. 　　Points to the URL containing a long image description document.
src	URL	Specifies the URL to display the image.
usemap	#mapname	Defines the image as a client-side image map.
vspace	pixels	HTML5 Not supported. HTML 4.01 Deprecated. 　　Specifies the top and bottom spacing of the image.
width	pixels	Specifies the width of the image.

Global Attributes

<img> tag supports HTML Global Attributes.

Event Attributes

<img> tag supports HTML Event Attributes.

Try Online Example

Align Image
This example demonstrates how to align an image in text.

Float Image
This example demonstrates how to float an image to the left or right of the paragraph.

Set Image Link
This example demonstrates how to use an image as a link.

Create Image Map
This example shows how to create an image map with clickable areas. Each area is a hyperlink.

HTML Tutorial:HTML Image

HTML DOM Reference Manual: Image Object

HTML: <input> tag HTML: <iframe> tag