IMG (In-line Images) Element

The IMG element allows an image file to be inserted within an HTML document. The purpose is to allow pictures, figures and so on to be included within a document and presented with the text, as opposed to having hypertext links that retrieve and display images in a separate viewing window. This element can not be used to include other HTML text within a given document.

Images can be included within a hypertext anchor: thus you can make an image that behaves as a button linked to other documents or resources.

The IMG element is empty, meaning there is no closing </IMG>. It has several attributes:

SRC="image_url"

SRC give the URL of the image document -- this attribute must be present. The URL scheme is the same as for hypertext links.

ALT="alternative text"

Some browsers cannot display images, while users connecting via phone lines often turn off image loading. The ALT attribute lets you specify a text alternative to the image, for use in these circumstances. You should always include an ALT alternative, particularly if the image is a button linked to some other resource. If the image is unimportant, you can always put ALT="".

ALIGN="bottom", "middle", "top", "absmiddle", "absbottom", "texttop", "baseline"

ALIGN tells the browser how to align the image with the neighbouring text. These are all optional. The default setting is ALIGN=left.

"bottom" aligns the bottom of the image with the baseline of the text, and is the default.
"middle" aligns the middle of the image with the baseline of text.
"top" aligns the top of the image with the top of the tallest item in the line.
"absmiddle" aligns the middle of the current line with the middle of the image.
"absbottom" aligns the bottom of the image with the bottom of the current line.
"texttop" allows any text following the image to align itself with the top of the tallest text in the line.
"baseline" aligns the bottom of the image with the baseline of the current line.

HEIGHT="n", WIDTH="n" (HTML 3)

HEIGHT and WIDTH specify the display height and width (in pixels) for the image -- if the picture does not fit, the browser should rescale the image to fit in the specified box. An example is HEIGHT="30" WIDTH="50" This is supported by a few browsers, including Netscape Navigator.

BORDER="n"

If ISMAP is used, then the image is a hypertext link, and will be surrounded by a border to idicate this. BORDER specifies the width of this border. In particular, BORDER=0 specifies no border, which is rather cute.