The difference between HTML img title and img alt

 The difference between HTML img title and img alt lies in the two aspects of "purpose of use and rendering effect". Simply put, img title and img alt are two different things. img title is a picture title, which is similar to a web page title. The caption text of the marked picture will be automatically displayed when the mouse is placed on the picture, but img alt is completely different! Img alt is the alternative text of the picture. The so-called alternative text means the text to be presented when the picture fails. If the picture can be displayed normally, img alt will not have any function.

Syntax of HTML img title and img alt

<img src="Image URL" alt="Image Alternative Text" title="Image Title">

Both the img title and the alt can be written directly in the img tag. Each picture can only be used once. Both functions are optional items and do not have to be written. If you want to know more about the difference and detailed usage of img title and img alt, you can refer to the following two articles.

• HTML img alt Picture alternative text
• HTML img title Mouse over to display text mark

Examples of HTML img title and img alt

<img src="#" alt="Display this text when the picture is invalid" style="border:1px black solid;">
<img src="Image URL" title="Move up to see the text" style ="border:1px black solid;">

The effect of the example

 

The example prepares a total of two img picture tags. The URL of the first picture is deliberately indicated by #, so that no pictures can be displayed. In the effect of the example, you can see that a line of text appears "If the picture is invalid, display this "Text", this is the alternative text effect of img alt. The second picture uses the effect of title. When the mouse is placed on the picture, you can see the picture title text automatically run out, unless the browser has special restrictions, otherwise usually Can be displayed normally. The above is the difference between HTML img title and img alt.

In order to make the image of the sample display a little clearer, we use CSS style to add a black outer border to the image. The syntax is "style="border:1px black solid;"". If you are interested in design, you can refer to the contents of " img border picture frame " and " CSS border frame ".