HTML <img> tag


In the following example, we insert a tulip photo w3my engineers in Shanghai Flower Port shooting in the page:

<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />

The effect of the above code:

Shanghai Flower Port - Tulips

Try it yourself

(You can find more examples at the bottom of the page)

Browser Support

IE Firefox Chrome Safari Opera

All browsers support the <img> tag.

Definition and Usage

img element is embedded in an image to your pages.

Please note that, technically, <img> tag does not insert an image in a Web page, but links from the image. <Img> tag to create an image that is referenced footprint.

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

Further reading: how to properly use the image

Differences between HTML and XHTML

In HTML, <img> tag has no end tag.

In XHTML, <img> tag must be closed properly.

In HTML 4.01, it is not recommended to use image element "align", "border", "hspace" and "vspace" attribute.

In XHTML 1.0 Strict DTD not supported image element "align", "border", "hspace" and "vspace" attribute.

Required attributes

Attributes value description
alt text Provisions alternate text of the image.
src URL Predetermined display URL of the image.

Optional attributes

Attributes value description
  • top
  • bottom
  • middle
  • left
  • right
Not recommended. According to the provisions of how to arrange text around the image.
border pixels Not recommended. Custom border around the image.
  • pixels
  • %
Define the height of the image.
hspace pixels Not recommended. Blank define the image left and right.
ismap URL The image is defined as a server-side image maps.
longdesc URL URL to the image that contains a long description of the document.
usemap URL The image is defined as a client-side image maps.
vspace pixels Not recommended. Define the image top and bottom of the blank.
  • pixels
  • %
Set the width of the image.

Global Properties

<img> tag supports HTML in the global properties .

Event Properties

<img> tag supports HTML in the event properties .

Examples TIY

Insert an image
This example demonstrates how to display images in a Web page.
Insert pictures from different locations
This example demonstrates how different folder or server images to display Web pages.
Background picture
This example demonstrates how to add a background image to an HTML page.
Arrangement pictures
This example demonstrates how to arrange the images in the text.
Floating Images
This example demonstrates how to make the image float to the left or right paragraph.
This example demonstrates how to adjust to a different image sizes.
Replacement text displayed as a picture
This example demonstrates how to display the image as replacement text. When a browser can not load images, replace text attributes tell readers they lose information. The image on the page are combined with the substitution text property is a good habit.
Create an image link
This example demonstrates how to use the image as a link.
Create image maps
This example shows how to create image maps with clickable areas. Each of these regions is a hyperlink.

Further reading - how to properly use the image

HTML and XHTML One of the most striking features is the ability to include in the text of the document image, the image as either intrinsic objects (inline image) of the document, also can use it as a hyperlink can be downloaded separately document, or as a background document.

Reasonably be added in the document image content (static or animated icons, photographs, descriptions, painting, etc.), the document will become more lively, more attractive, and looks more professional, more information nature and easy to navigate. You can also make a special visual image becomes a hyperlink boot FIG.

However, if the excessive use of images, documents will become fragmented, chaotic, and can not read, users download and view the page, but will add a lot of unnecessary waiting time.

Please read the following article to learn two major image formats on the Web: GIF and JPEG, as well as how to properly use the image:

Related Pages

HTML DOM Reference Manual: Image Object