HTML <img> alt attribute
Definition and Usage
alt The attribute is a required attribute that specifies the alternative text to be displayed when the image cannot be displayed.
If the user cannot view the image due to the following reasons, the alt attribute can provide alternative information for the image:
- Internet speed is too slow
- Error in the src attribute
- The browser has disabled images
- The user is using a screen reader
The alt attribute of the <img> tag specifies alternative text that is used to display in the browser instead of the image when the image cannot be displayed or the user disables image display.
We strongly recommend that you use this attribute for each image in the document. This way, even if the image cannot be displayed, users can still see some information about what is missing. Moreover, for the disabled, the alt attribute is usually the only way they can understand the content of the image.
Tip:To create a tooltip for an image, please use title attribute!
Tips and Notes
Note:alt The value of the attribute is a string that can contain up to 1024 characters, including spaces and punctuation. This string must be enclosed in quotes. The alt text can contain entity references for special characters, but it does not allow other types of markup, especially no style tags.
Note:When the user moves the mouse over the img element, Internet Explorer will display the value of the alt attribute. This behavior is not correct. All other browsers are moving towards the standard, only displaying alternative text when the image cannot be displayed.
Tip:If you need to create a tooltip for an image, please use title attribute.
Instance
Example 1
<img src="/i/eg_tulip.jpg" alt="Shanghai Flower Port - Tulip" />
If the image cannot be displayed, the browser will show alternative text, like this:
In addition, when the user moves the mouse over the image, the latest browsers will display descriptive text in a text box. The following code adds descriptive text to the image in the alt attribute:
You can move the mouse over the following photo to see the corresponding effect:
The text box in the red circle is the effect displayed by the IE7 browser when the mouse is moved over the image:
Example 2
Specified alternative text image:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Syntax
<img alt="text">
attribute value
| value | description |
|---|---|
| text |
Specify the alternative text for the image. Principles of using alt text:
|
Browser Support
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Support | Support | Support | Support | Support |
