Adding Alternate Text

When browsing the Web, you might have noticed that many times when you move your mouse pointer over an image, you see a text pop-up that describes the image, or tells you something more about the area of the Web site that image represents. You can see an example of that type of text pop-up in Figure 8.2.

Figure 8.2. The alt attribute adds a text pop-up to your image.

The following HTML sample shows how the alt attribute is added into the <img /> tag. Like the src attribute, the alt attribute tells the browser more information about the image. And, like the src attribute, you should always use the alt attribute with the <img /> tag.

<img src="/books/1/174/1/html/2/http://www.thingstobehappyabout.com/face2.gif"  alt="This looks just like me!"/>

alt attribute

Sets the alternate text for a graphic. It was named alt because it describes the text some people would see as an alternative to the image that others would see.

The alt attribute has another very important purpose. Many people with slower modem connections to the Web decide to customize their browser settings to ignore graphics because loading graphics into a Web browser can sometimes take a long time. Remember, too, that not all browsers enable you to view graphics. Some browsers, such as Lynx, have no graphics capabilities at all. The alt attribute ensures that people who can't view your graphics can still understand their context.

Caution

Although you should use the alt attribute whenever you use the <img /> tag, make sure that you don't specify irrelevant text. For example, there is no point in specifying alternate text for a decorative image (such as a bullet or a line); instead, specify an empty value (alt=" ").

Without any other attributes, the browser displays the image at its original size and aligns the bottom of the graphic with the bottom of the text. You can adjust both those settings using style sheet tags.