How to Alt Text in HTML

Provide your website visitors with brief descriptions of your images.

If you've ever had a small text pop-up appear when you mouse-over an image, you've already gotten an introduction to "Alt Text." Alternate text is an HTML programming code that is added to images, which serves several purposes. It provides a text description of a picture in case the picture cannot load--a user may have images disabled to speed download times. It also provides information if a person bookmarks the image. It is also read by text-to-speech converters, allowing those with vision problems to know what you're trying to say with a picture.

Instructions

1. Open the HTML document that you want to modify.

2. Go to the first image tag. It will be some variation of: <IMG SRC="www.mysite.com/image.jpg">.

3. Add the code ALT="Description of the picture" to the code. It will now look like this:

   <IMG SRC="www.mysite.com/image.jpg" ALT="Description of the picture">

4. Replace "Description if the picture" with your own information. It can be a text description, the file name and size, additional information about the picture or whatever else you want people to know.

5. Add an Alt Text to each image on the web page.

6. Save the file and view it in a web browser. Hover the mouse over a picture to make the Alt Text appear.

References

• Catcode: Alternate Text
• Webmaster Tips: Using ALT and TITLE Codes
• Echo Echo: Alternative Text