An alt attribute is an accompanying command associated with certain HTML and XHTML tags designed to provide a way to associate alternative text with said tags. The most common use of this attribute is in the img tag for the purpose of captioning graphics. Some people call this an alt tag, but this is not accurate because it is not an html tag. The term “tag” has a distinct meaning in web design referring to the commands between angle brackets that do the actual markup in HTML. The alt attribute uses the following syntax:
<img alt="text" src="source url">
<area alt="alt text">
<input alt="text field prompt">
The img tag is only one of several tags that accept the alt attribute. Other tags are “area” and “input.” The img tag displays an image. The area tag displays a link in an image map, and the alt attribute provides the anchor text for the link. An input tag tells the web browser to display a text field and uses the alt text to provide the associated prompt.
Descriptions of graphics have historically been one of the most common uses of the alt attribute. This has been especially useful to people who are visually impaired, who use software to read the screen that is not capable of interpreting a picture. The main purpose of this attribute is to provide a caption rather than to describe the associated image. An example of proper alt text would be “George Washington endured many hardships as General during the revolutionary war.” Actual image descriptions are the job of the title attribute.
Search engines make use of the text provided in the alt attribute. If a web page consists solely or primarily of pictures, the search engine spider is able to crawl the page despite the fact that images by themselves are useless to search engine spiders. The alt attribute is required for the img tag in later versions of HTML, but some web developers put nothing between the quotes. This fails to take advantage of an opportunity for better search engine optimization.
Older web browsers rendered the alt attribute as tooltips, so web developers incorrectly used it to perform the task of a tooltip, which was to provide additional information about an image, such as a description. Newer versions have corrected this problem. The title attribute is now used for this purpose, and the text of this attribute can be seen by hovering the mouse over an image or link.
Web browsers that are not able to display images display the alt text instead. Older browsers always do this, but it is possible to configure more recent versions to display the alt text only instead of the image. This serves the purpose of saving bandwidth because the browser does not have to load the image.