HTML <img> Tag
Example
An image is marked up as follows:<img src="/images/w3html.png" alt="HTML" width="120" height="95" />
Definition and Usage
The <img> tag embeds an image in an HTML page.
Notice that 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.
Browser Support
The
<img> tag is supported in all major browsersDifferences Between HTML and XHTML
In HTML the <img> tag has no end tag.
In XHTML the <img> tag must be properly closed.
Tips and Notes
Tip: The alt attribute is meant to be used as an alternative text if the image is not available, not as a mouse-over text. To
show a mouse-over text on images or image-maps, use the title attribute, like this:
<img src="/images/w3html.png" alt="HTML" width="120" height="95" />
Note: When a web page is loaded, it is the browser, at that moment, that actually gets the image from a web server and inserts it into the page. Therefore, make sure that the images actually stay in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon is shown if the browser cannot find the image.
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 |
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. Rarely used. Look at usemap instead | STF |
| longdesc | URL | Specifies the URL to a document that contains a long description of an image | STF |
| title | text | Specifies a title text for 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 |
Standard Attributes
Тег<img> поддерживает следующие стандартные атрибуты:| 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 |
More information about Standard Attributes.
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 |
More information about Event Attributes.
Example 1
How to insert images from another folder or from another web site.<p>Insert an image from another folder:</p> <img src="/images/w3html.png" alt="HTML" width="120" height="95" /> <p>Insert an image from a web site:</p> <img src="http://xhtml.co.il/images/logo/logo_jQuery_xhtml.gif" alt="jQuery" width="120" height="95" />
Example 2
How to align an image within a text.<p> An image <img src="/images/blue-green-axe.gif" alt="Axe" align="bottom" width="75" height="75" /> in the text An image <img src="/images/blue-green-axe.gif" alt="Axe" align="middle" width="75" height="75" /> in the text An image <img src="/images/blue-green-axe.gif" alt="Axe" align="top" width="75" height="75" /> in the text </p>
Example 3
How to let an image float to the left or right of a text.<p> <img src="/images/blue-green-axe.gif" alt="Axe" align="left" width="75" height="75" /> A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text. </p> <p> <img src="/images/blue-green-axe.gif" alt="Axe" align="right" width="75" height="75" /> A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text. </p>
Example 4
How to add a hyperlink to an image.An image that is a link: <a href="http://Xhtml.co.il/en/"> <img src="/images/w3html.png" alt="HTML" width="120" height="95" border="0" /> </a>
Example 5
An image-map, with clickable areas, and a target attribute:<p>Click on one of the planets to watch it closer:</p> <img src="/images/353915main_image_1377_428-321.gif" alt="Planets" width="350" height="263" usemap="#planetmap"> <map id="planetmap" name="planetmap"> <area shape="rect" coords="203,104,343,241" alt="Sun" title="sun" href="http://xhtml.co.il/tryit/sun.html" target="_blank" > <area shape="circle" coords="92,98,56" alt="Mercury" title="Mercury" href="http://xhtml.co.il/tryit/mercury.html"> </map>
Was this information helpful?
