The University of Texas at Austin- What Starts Here Changes the World
Services Navigation

Graphics

The <IMG> Tag

Use the <IMG> tag to include inline images in a Web page. An inline image appears in the page itself and does not open in a separate window or require a helper application to display. For example

<IMG SRC="car.jpg" ALT="flamed Geo Metro car" width="317" height="216" />

displays the image called car.jpg and alternative text "flamed Geo Metro car". This image appears below.

web banner
graphics

The ALT attribute specifies a text alternative for the image so when users have images turned off or are using a browser that does not display images, they see the alternative text. The attributes for the <IMG> tag appear below.

Attribute

Meaning

SRC="url"

The source URL for the image

ALT="text"

Alternative text to display if the image is not loaded. Some browsers display the ALT text when the mouse is over the image. This is very important to include for all your images for accessibility reasons also.

HEIGHT="n"

WIDTH="m"

The height, in pixels, that the image should display. If the actual image height does not equal n, the browser will scale the image to fit the specified dimensions. Although the HEIGHT and WIDTH attributes are not required, the page will layout more quickly if they are specified.

BORDER="n"

Set the border pixel width around images contained within hyperlinks. If the image is a link, a blue border displays around the images unless BORDER="0" is specified

USEMAP="url"

Specify location of the map information for an image map

example used in img tag of flamed geo:
usemap="#Map"

example of code:
<map name="Map" id="Map">
<area shape="rect" coords="72,24,196,69" href="http://http://www.rodandcustommagazine.com" />
</map>

ALIGN="left,right, top, middle, or bottom"

Specify how the image aligns with text on the same line.

ID="imageImportant"

example using ID for images:

#imageImportant {

float: left;
margin: 10px;
padding: 20px;

}

A specific name for this img tag. Useful for specifying a one time treatment of an image defined in css, or for accessibility purposes.

CLASS="imgNormal"

example of a class for images:

.imgNormal {
margin: 10px;
padding: 5px;

}

You could call a class you created for the way this image is displayed.

example of defining the
IMG TAG in css:

img {
margin: 10px;
padding: 5px;

}

If you use css, then you can specify a class for images, as you would with another tag, (ie. <H1> or <table> ) and it would affect the display of all the images in your document unless another CLASS or ID is called. If you define the treatment for the img tag in the css, you don't have to call a class or give it an ID, as long as you've linked to the css or have it in your html doc. more on css...



  Updated 2006 August 14
  Teamweb at UT Austin
  Comments to www@www.utexas.edu