HTML Help & Resources

IMG - Images and Graphics

The IMG tag is used to display images or graphics, and does not require a closing HTML tag - one of the few that does not.

Combined with the use of style, the IMG tag offers a wide variety of display capabilities to be used within a document. Images can be moved or placed, positioned as a relative or permanent object to the page. For instance, the logo on this page, at far left, is an example of a permanently positioned object, in that no matter where the position of the page is ( scrolling ), the image remains fixed in place.

The elements of style, and how to use them, are not covered in this reference. For more information on how to utilize the power of cascadding style, visit our CSS reference instead.

Note the height and width properties can be omitted, allowing the user's browser to determine the size. Using both the ALT and TITLE attributes ensures the alternate display text will be shown in all browsers.

Also note if the border property is not defined, most browsers will place a colored bordered around an image.

In the above example there are some important considerations. Adding a value for the border property, inside the tag and not defined in CSS, ensures all browsers will not place a border around an image.

The use of the SRC property, no matter the context, should contain a valid URI, and not just a directory or filename. Including the complete URL path to the source image ensures the image will be displayed at all times ( unless a user has disabled or prevented images from being displayed ) because under some circumstances browsers can read a difference between “images/pic.gif” and “http://www.site.com/images/pic.gif”.

When omitting the height and width properties, browsers will determine the display size of an image. However, you can define just a height, in which case the browser would adjust the image width accordingly, with the same rules applying for just including width and not the height. An example below explains in more detail.

The use of both the ALT and TITLE tags is necessary, in order to make certain, all browsers display an alternate, textual representation of an image in the event image display has been disabled. Browsers such as FireFox will not display a “tool tip” if the TITLE tag is omitted, ignoring the contents of the ALT text.

Move on to the Next Topic - Lists: Ordered and Unordered.