ExampleHow to insert an image: <img src="image.png" alt="The image" height="64" width="64" /> | Browser Support |
1. Definition and Usage
The <img> tag defines an image in an HTML page.
The <img> tag has two required attributes: src and alt.
Note: Images are not technically inserted into an HTML page, images are linked to HTML pages. The <img> tag creates a holding space for the referenced image.
Tip: To link an image to another document, simply nest the <img> tag inside <a> tags.
2. Differences Between HTML and XHTML
In HTML the <img> tag has no end tag.
In XHTML the <img> tag must be properly closed.
3. Required Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
| Attribute | Value | Description | DTD |
|---|---|---|---|
| alt | text | Specifies an alternate text for an image | STF |
| src | URL | Specifies the URL of an image | STF |
4. Optional Attributes
| Attribute | Value | Description | DTD |
|---|---|---|---|
| align | top bottom middle left right | Deprecated. Use styles instead. Specifies the alignment of an image according to surrounding elements | TF |
| border | pixels | Deprecated. Use styles instead. Specifies the width of the border around an image | TF |
| height | pixels % | Specifies the height of an image | STF |
| hspace | pixels | Deprecated. Use styles instead. Specifies the whitespace on left and right side of an image | TF |
| ismap | ismap | Specifies an image as a server-side image-map | STF |
| longdesc | URL | Specifies the URL to a document that contains a long description of an image | STF |
| usemap | #mapname | Specifies an image as a client-side image-map | STF |
| vspace | pixels | Deprecated. Use styles instead. Specifies the whitespace on top and bottom of an image | TF |
| width | pixels % | Specifies the width of an image | STF |
5. Standard Attributes
The <img> tag supports the following standard attributes:
| Attribute | Value | Description | DTD |
|---|---|---|---|
| class | classname | Specifies a classname for an element | STF |
| dir | rtl ltr | Specifies the text direction for the content in an element | STF |
| id | id | Specifies a unique id for an element | STF |
| lang | language_code | Specifies a language code for the content in an element | STF |
| style | style_definition | Specifies an inline style for an element | STF |
| title | text | Specifies extra information about an element | STF |
| xml:lang | language_code | Specifies a language code for the content in an element, in XHTML documents | STF |
6. Event Attributes
The <img> tag supports the following event attributes:
| Attribute | Value | Description | DTD |
|---|---|---|---|
| onabort | script | Script to be run when loading of an image is interrupted | STF |
| onclick | script | Script to be run on a mouse click | STF |
| ondblclick | script | Script to be run on a mouse double-click | STF |
| onmousedown | script | Script to be run when mouse button is pressed | STF |
| onmousemove | script | Script to be run when mouse pointer moves | STF |
| onmouseout | script | Script to be run when mouse pointer moves out of an element | STF |
| onmouseover | script | Script to be run when mouse pointer moves over an element | STF |
| onmouseup | script | Script to be run when mouse button is released | STF |
| onkeydown | script | Script to be run when a key is pressed | STF |
| onkeypress | script | Script to be run when a key is pressed and released | STF |
| onkeyup | script | Script to be run when a key is released | STF |
