Detailed explanation of the difference between alt and title

These two attributes are often used, but their differences have not been summarized. Now let me summarize their usage:

Similarities: They will both display a small floating layer to display text content.

Differences:

1. alt can only be an attribute of an element, while title can be either an attribute of an element or a tag, for example: <title>Title</title>.

2. The alt attribute is used to specify replacement text and can only be used in img, area and input elements (including applet elements). It is used to provide users with text descriptions to help them understand image information when images on a web page cannot be displayed normally. Note that alt is used to replace images rather than provide additional explanatory text. According to some SEO experts, using the alt attribute also has a search engine optimization effect, because search engines cannot directly read image information, and alt can provide them with text information, so it is more friendly to search engines.

The title can be used on any element. When you move the mouse over the element, the content of the title will be displayed to provide additional explanations or prompts.

But, people often make mistakes when using both title and alt attributes in img tags. In older versions of IE browsers, when the mouse passes over an image, the prompt text displayed is the content of the alt attribute, while the title attribute is ignored. This has misled many people. Therefore, if you want to display the content of title in IE, either the title attribute is consistent with alt, or the alt content is empty ("", no spaces are allowed). However, this situation will no longer occur in the new version of IE (IE8 and above).

In addition, when the img tag is nested within the a tag, the title attribute of img takes effect.

The above detailed explanation of the usage differences between alt and title is all the content that the editor shares with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.

Original URL: http://www.cnblogs.com/freefish12/archive/2016/06/07/5567339.html