<img> Tag

The image tag by itself does nothing, but by adding the source option to specify the location and filename of a graphic, you can display a graphic image in your web page. The tag is used singularly. There is no need for a closing tag.

<img> – singular tag (in XHTML, always close as <img />)


<img src="filename.jpg" />

<img src="foldername/filename.jpg" width="150" height="50" border="0" alt="Description of image here" />

The image tag and source option can be used alone, but should be used in conjunction with these options:

  • width: The width of the image in pixels
  • height: The height of the image in pixels
    It is important to use the width and height commands because the page draws much faster. When you specify the commands in code, the entire page of text appears almost immediately and the graphics load as fast as the download time makes possible. If the graphics are not sized in the code, the text will not load immediately and will sometimes have to reload and redraw when the images are done downloading.
  • border: The border around the image in pixels
  • alt: This is alternative text. This is the text description if someone has graphics turned off. This text description is also used in pop-up boxes during a mouse-over and is used for browser software that is being used by the vision-impaired. Use of a textual description of the image in the ALT tag is required for compliance with both the Americans with Disabilities Act and the Web Accessibility Initiative.

Other options for the <img src> code:

  • usemap and ismap: These are used for making graphics into image maps.
  • hspace and vspace: These are used when wrapping text around graphics. The amount of HSPACE and VSPACE is how far away the text will wrap horizontally and vertically around the graphic object. Defined in pixels.
  • align: This alignment tag is used for text wrapping. Use the align tags to place the image where you want it. Subsequent text will wrap around it. You have horizontal (left, center, right…) and vertical (top, middle, bottom…) controls here.
  • lowsrc: This is browser specific for Netscape, and it’s generally not a good idea to use browser-specific tags. In case you’re wondering, however, the LOWSRC is a second image file that basically means a low-resolution source image that displays while the high-resolution image downloads.