Рекомендуемый курс:
HTML атрибут alt тега <img>
Подсказка и комментарий Определение и использование
Атрибут является обязательным атрибутом, который определяет заменяющий текст при невозможности отображения изображения.
- Предположим, что пользователь не может увидеть изображение по следующим причинам, атрибут alt может предоставить заменяющую информацию для изображения:
- Слишком медленная скорость интернета
- Ошибка в свойстве src
- Браузер отключил изображения
Пользователь использует экранное чтение
Атрибут alt тега <img> определяет заменяющий текст, который используется для отображения в браузере вместо изображения при его невозможности отображения или если пользователь отключил отображение изображений.
Подсказка:Мы настоятельно рекомендуем использовать этот атрибут для каждого изображения в документе. Таким образом, даже если изображение не может быть отображено, пользователь все равно сможет увидеть一些 информацию о том, что потерялось. И для людей с ограниченными возможностями, атрибут alt обычно является единственным способом понять содержимое изображения. Атрибут titleЕсли нужно создать подсказку для изображения, используйте
!
Комментарий:Подсказка и комментарий Значение атрибута - это строка, которая может содержать до 1024 символов, включая пробелы и знаки препинания. Эта строка должна быть заключена в кавычки. В этом тексте alt можно использовать экранные обозначения для специальных символов, но не допускаются другие категории маркеров, особенно не допускаются стилизованные теги.
Комментарий:Когда пользователь перемещает мышь над элементом img, Internet Explorer показывает значение атрибута alt. Это поведение не является правильным. Все другие браузеры стремятся соответствовать стандарту, показывая заменяющий текст только при невозможности отображения изображения.
Подсказка:Если нужно создать подсказку для изображения, используйте Атрибут title.
Пример
Пример 1
<img src="/i/eg_tulip.jpg" alt="Шанхайский парк цветов - тюльпаны" />
Если изображение не может быть отображено, браузер покажет заменяющий текст, например:
Кроме того, когда пользователь перемещает мышь над изображением, последние браузеры показывают описательный текст в текстовом поле. Ниже приведен код, который добавляет описательный текст в атрибут alt изображения:
Переместите мышь на изображение ниже, чтобы увидеть соответствующий эффект:
Текст в красном круге - это эффект, который браузер IE7 показывает, когда пользователь перемещает мышь над изображением:
Пример 2
Изображение с указанным альтернативным текстом:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Грамматика
<img alt="text">
Значение атрибута
| Значение | Описание |
|---|---|
| text |
Определение альтернативного текста изображения. Принципы использования alt-текста:
|
Поддержка браузеров
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Поддержка | Поддержка | Поддержка | Поддержка | Поддержка |
