HTML <img> tag
Example
An image is marked up as follows:
|
<img src="angry.gif"
alt="Angry face" />
|
Try it yourself! (more examples at the bottom of this page)
|
Definition and Usage
The <img> tag embeds an image in an HTML page.
The <img> tag has two required attributes: src and alt.
Browser Support
The <img> tag is supported in all major browsers.
Differences Between HTML and XHTML
In HTML the <img> tag has no end tag.
In XHTML the <img> tag must be properly closed.
The "align", "border", "hspace", and "vspace" attributes of the image element
were deprecated in HTML
4.01, and are not supported in XHTML 1.0 Strict DTD.
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="angry.gif" alt="Angry face" title="Angry
face"
/>
Required Attributes
DTD indicates in which DTD the attribute is
allowed. S=Strict, T=Transitional, and F=Frameset.
| Attribute |
Value |
Description |
DTD |
| alt |
text |
Defines a short description of the image |
STF |
| src |
URL |
The URL of the image to display |
STF |
Optional Attributes
| Attribute |
Value |
Description |
DTD |
| align |
top
bottom
middle
left
right |
Deprecated. Use styles instead.
Specifies how to align the image according to surrounding text. |
TF |
| border |
pixels |
Deprecated. Use styles instead.
Defines
the border thickness around the image. |
TF |
| height |
pixels
% |
Defines the height of the image |
STF |
| hspace |
pixels |
Deprecated. Use styles instead.
Defines white space on the left and right side of the image. |
TF |
| ismap |
URL |
Defines the image as a server-side image map |
STF |
| longdesc |
URL |
A URL to a document that contains a long description of the
image |
STF |
| usemap |
URL |
Defines the image as a client-side image map. Look at the
<map> and <area> tags to figure out how it works |
STF |
| vspace |
pixels |
Deprecated. Use styles instead.
Defines white space on the top and bottom of the image. |
TF |
| width |
pixels
% |
Defines the width of the image |
STF |
Standard Attributes
| id, class, title, style, lang, xml:lang |
For a full description, go to Standard
Attributes.
Event Attributes
| onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup |
For a full description, go to Event
Attributes.
Try-It-Yourself Demos
Insert
images from different locations
How to insert images from another folder or from another web site.
Aligning
images
How to align an image within a text.
Let the
image float
How to let an image float to the left or right of a text.
Make a hyperlink of an
image
How to add a hyperlink to an image.
Create an image map
How to create an image map, with clickable regions.
Each region is a hyperlink.
|
