HTML Image Basics
By Stephen Bucaro
The <img> tag is used to display images and animated gifs on a webpage. You
can use the <img> tag to display images, icons, logos, and buttons, bullets,
arrows and other graphic or navigation elements.
<img align="left" alt="alt text" title="title text" border="0" width="156" height="225" src="worker.jpg" />
The most important attribute of the <img> tag is the src attribute. The image
will be displayed on the page if you include only the src attribute in the <img>
tag. The src attribute tells the browser where to find the image file. It sets the address
of the image, which can be either absolute or relative. An absolute path
contains the domain name, directory and subdirectory names, and the image's file name. A
relative path contains only the path from the webpage to the image file. For example,
if the image file is in the same folder as the webpage, the relative path is just the file name.
The alt attribute is also an important attribute of the <img> tag. The alt
attribute defines text to be displayed if the image cannot be loaded. The title attribute
defines text to displayed in a tool tip popup when the user moves their mouse over the image.
The alt and title attributes are very important for search engines and to provide
information to speech synthesizers for the hearing impaired.
The border attribute is used to control the border around the image. Set the border
attribute to the desired thickness of the border in pixels. One of the most common uses of the
border attribute is to set border="0" to remove the border that appears when an
image is used in a link, as shown to the right. Note; in this case you might keep the border in
order to indicate that the image is a link, but if the image were a button, you could remove
The height and width attributes specify the dimensions of the image. If a
height or width value is not provided, the image will be displayed full size
in that dimension. If you don't want the image displayed full size, you can specify larger
or smaller dimensions, however to maintain the images aspect ratio, you need to adjust each
dimention by the same percentage. If you want the image displayed full size, you can leave
the height and width attributes out, however this will cause the browser to take
longer to display the image.
The align attribute is used to control the alignment of the image. Note the first image
in this article has align="left", while the second image has align="right". Note
how the text wraps around the image. If you don't like the layout of the text wrapping, with
align="right" you can use the <br clear="right"> tag to clear the text wrapping.
With align="left" you can use the <br clear="left"> tag to clear the text wrapping.
Or you can use <br clear="all"> to clear any previous align setting.