Correct use of the alt text attribute and title attribute can not only improve the search ability of images, but also be very helpful for user experience.
Alt text is intended to provide text descriptions to viewers who cannot see the images in your document. This includes users who use browsers that do not support image display or image display being turned off, users who are visually impaired and users who use screen readers. So the replacement text is used to replace the image instead of providing additional literal text. alt text also plays the role of title in the ie browser - text prompts when the mouse passes. IE browser misleads everyone. In IE, alt will become a text prompt because IE is not standard. Firefox does this better.
title is an explanation and additional addition to the picture. If you need to use the text prompt when the mouse passes through the picture, you should use the attribute title. The title attribute has a higher priority than alt text. However, due to the wrong guidance, many beginners only add the alt attribute to the img tag.
Let’s look at an example below, and we can see the difference between alt text and title more clearly:
//*The picture is not displayed
<img src=VeVb.jpg width=400 height=104alt=Web design>
<img src=VeVb.jpg width=239 height=104 title=Web design/
//*Picture display
<img src=VeVb.png title=Web design/
<img src=VeVb.png alt=Web design/
In the ie browser, text prompts will appear when the mouse passes through the picture for these four codes.
In the firefox browser, the first three codes, when the mouse passes through the picture, the text prompt will appear, and the last code, the mouse passes through the picture, will not display the text prompt (as shown in the figure below).
That is to say, when the picture cannot be displayed, the content of the replacement text will be displayed when the mouse passes through the picture, and when the picture can be displayed, the replacement text will not be displayed when the mouse passes through the picture.
Now that we know what the difference between alt text and title is, how can we use them correctly?
1. alt text and title are very important to visitors (alt text will be more important to search engines), so when defining img objects, it is best to write all alt text and title attributes to ensure that they can be used normally in various browsers.
2. Include keywords in alt text and title, and the contents of the two are best different.
3. Do not pile up keywords in alt text and title, otherwise it may lead to search engine penalties.