Detailed graphic explanation of the difference between alt attribute and title attribute in tag

In page layout, pictures will inevitably be used. Speaking of pictures, everyone should be familiar with the alt attribute and title attribute of the img tag. Do you know under what circumstances they are used? This article will talk to you about the difference between the alt attribute and the title attribute in the img tag. Interested friends can continue reading below.

The similarities and differences between the alt attribute and the title attribute

The similarities: they will both have a small floating layer to display the content related to the image

The differences are as follows Characteristics of the

alt attribute:

① If the image is not loaded successfully and cannot be displayed, a piece of text will appear where the image is not displayed. This function is to provide information for unloaded images, making it easier for users to browse web pages, and also for developers to maintain web pages.

② Search engines can obtain images through the text description of this attribute

Features of the title attribute:

The title attribute can be used on any element. When the user moves the mouse to element, the content of the title will appear, which serves as a description of the picture. Its essence is a note or annotation for the picture. In layman's terms, the essence of the alt attribute is to replace the picture with text. content, and the essence of the title attribute is the description or comment of the picture.

Example demonstration

The alt attribute effect is as follows:

<img src="img/frui.jpg" alt="图片未显示出来时，提醒你这是一张图片"/>

Rendering:

When the picture is not displayed normally, the result is as shown in the figure, and only the content set in alt appears.

The effect of the title attribute is as follows:

<img  src="img/fruit.jpg" title="介绍这张图片是创意水果图片"/ alt="Detailed graphic explanation of the difference between alt attribute and title attribute in <img> tag" >

Rendering:

##As shown in the picture, this picture is displayed normally. When the mouse passes over the picture When , the content in the title appears to describe the picture.

Summary: No matter whether the picture is displayed normally or not, the picture only sets the title attribute. When the mouse hovers over the picture, you can see the text description of the picture. When the image only has the alt attribute set, you can hover the mouse over the image to see the alternative text for the alt attribute of the image. If the image has both the title attribute and the alt attribute set, only the title attribute of the image will be displayed when the mouse is hovering. The above mainly introduces the difference between the alt attribute and the title attribute in the img tag. It is relatively simple. I hope you can understand it.

The above is the detailed content of Detailed graphic explanation of the difference between alt attribute and title attribute in tag. For more information, please follow other related articles on the PHP Chinese website!