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.
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.
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.
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" />
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 |
| 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
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 |
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.
 |
Try it Yourself - Examples |
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.
Whether you're new to XML or already an advanced user,
the user-friendly views and powerful entry helpers,
wizards, and debuggers in XMLSpy are designed to meet your XML
and Web development needs from start to finish.
New features in Version 2010!
- XML editor
- Graphical XML Schema / DTD editors
- XSLT 1.0/2.0 editor, debugger, profiler
- XQuery editor, debugger, profiler
- XBRL validator, taxonomy editor, taxonomy wizard
- Support for Office Open XML (OOXML)
- Graphical WSDL 1.1/2.0 editor & SOAP debugger
- JSON editing & conversion
- Java, C#, C++ code generation
- And much more!
Download a free trial today!
|
|
|
| 
