Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

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" />

alt text 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 border.

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.