Adding Alternative Text To Your Images
Print This Post
No CommentRelated Reading |
“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:
| <html> <head> </head> <img src=”image.jpg” alt=”Horse Image”> </body> |
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.
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!









Popular Tags