IMG - Inline images

This element is also available in our updated HTML 4 reference. Some characteristics may have changed.

Appearance:	<IMG SRC=`URL`>
Attributes:	SRC=`URL`, ALT=`string`, ALIGN=left\|right\|top\|middle\|bottom, HEIGHT=`n`, WIDTH=`n`, BORDER=`n`, HSPACE=`n`, VSPACE=`n`, USEMAP=`URL`, ISMAP
Contents:	None (Empty).
May occur in:	BODY, DIV, CENTER, BLOCKQUOTE, FORM, TH, TD, DT, DD, LI, P, H1, H2, H3, H4, H5, H6, ADDRESS, TT, I, B, U, STRIKE, BIG, SMALL, SUB, SUP, EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, FONT, A, APPLET, CAPTION.

The IMG tag is used to insert images within text. These are often called "inline" images. Note that the IMG tag is not a block tag by itself, so it must be used only within a block element. The location of the image file should be specified in the SRC attribute. It can be a relative or an absolute URL. When the image cannot be displayed for whatever reason, the browser should display the ALT text instead. The WIDTH and HEIGHT attributes should contain the image's dimensions. This allows a browser to lay out the page in advance, as it now knows where the text below the image should be drawn.

ALIGN controls the alignment of the image with respect to the text. Using a value of LEFT or RIGHT will make the image line up against the left or right margin, and text will flow around it. To force text below such an aligned image, use BR with the CLEAR attribute. The values TOP, MIDDLE and BOTTOM specify where any text following the image should be put. If more than one line follows after the image, it will be put below the image.

VSPACE and HSPACE get a numeric value, indicating the number of pixels that should be left free around the image. VSPACE covers vertical spacing and HSPACE the horizontal spacing.

The BORDER attribute is used when the image is a link. It indicates that the browser should draw a border of the indicated size around the image to show that it is a link. It's most often used as BORDER=0 to turn it off. This has the disadvantage that the image must make it very clear that it's a hyperlink.

ISMAP and USEMAP are used for imagemaps. The ISMAP attribute specifies that the link that this image is in goes to an imagemap program on the server, so the browser can send the coordinates of the selected location to the server. USEMAP is used for a so-called client-side imagemap. It specifies the URL of the imagemap information. Support for this is limited, especially if the URL points to a different document rather than an inline anchor. See the section on the MAP tag for more information about client-side imagemaps.

Notes:

Most browsers only support GIF and JPEG file types for inline images.
The ALT text may not contain markup, other than entities. Not all browsers support entities in ALT text, so be careful.
Although the ALT attribute is not required, it is good practice to add it. It should replace the image's meaning, and not just provide a description of the image! If the image is purely decorational, use ALT="" or a decorative ALT text like "* " if possible.
Using WIDTH and HEIGHT with incorrect values, or with percentage values is not valid. Some browsers (most notably Netscape) resize the image to the indicated size, but this often gives very poor results. Other browsers simply ignore the WIDTH and HEIGHT attributes in such a case.
Browsers which do not draw boxes around hyperlinked images will not honor the BORDER attribute.

HTML 3.2 Reference ~ Elements by Function ~ Elements Alphabetically

Home, Forums, Reference, Tools, FAQs, Articles, Design, Links