Adding Alternative Text To Your Images @ OWDC

LESSON 1-07-02: Adding Alternative Text To Your Images

Web Design Lessons > Lesson 1-07-02: Adding Alternative Text To Your Images

Previous Lesson | Lesson Index | Next Lesson

"Alternative text" is the text that appears when you hover your mouse over an image. Actually, the real reason alternative text should be used along with every significant image on your HTML document is that if the image does not get loaded for one or another reason, your alternative text will appear instead of the image. Besides, your visitors might bu surfing with images turned off or have an old, text-only browser, which prevents them from viewing images. In this case, having a relevant alternative text will help them understand what the page is about.

You can add alternative text to your images by using the "alt" attribute inside the <img> tag. Let's put the alternative text "Horse Image" to our horse image:

When you hover your mouse over the horse image for a little while, you should see our message "Horse Image" displayed:

As you see, we've used alternative text that is relevant to the image displayed in this example. Webmasters who wish to spam the search engines sometimes stuff alt attributes with irrelevant keywords, in hopes of getting a better ranking. However, this commonly ends in them being banned by the search engine, so it is not wise to repeat keywords in the alt attribute, or anywhere else for that matter.

Sidenote #1: Check out my web design resources page to download a superb eBook!

Sidenote #2: If you enjoyed this lesson, please link to it :)

We're done with adding alternative text to images. In the next lesson of your free website design course, we're going to learn how to wet the width and height of images and how to add image borders. Yup, let's go!

Previous Lesson | Lesson Index | Next Lesson

Nearby Lessons:

• Lesson 1-05 HTML Tables
• Lesson 1-06 Background Alteration
• Lesson 1-07 Images

• Lesson 1-07-01 Inserting images into your web pages

• Lesson 1-07-02 Adding alternative text to your images

• Lesson 1-07-03 Sizing images & adding image borders

• Lesson 1-07-04 GIF vs JPEG

• Lesson 1-07-05 The PNG format

• Lesson 1-07-06 Using spacer images
• Lesson 1-08 Hyperlinking
• Lesson 1-09 Aligning Your Content

Back To Top

IMAGES!