»

1. Пример кода
2. Альтернативный текст
3. Альтернативное описание - Пользователи
4. Альтернативное описание - поисковые системы
5. Узнайте больше о Alt
6. Значения атрибута alt
7. Все атрибуты IMG Элемент

Обмен - это забота!

Атрибут <img> HTML-тег Что делает <img alt = "">? Определяет альтернативный текст, который может быть представлен вместо изображения.

Пример кода

<img src = "/ wp-content / uploads / flamingo.jpg" alt = "Розовый фламинго.">

Альтернативный текст

Атрибут alt принимает любую текстовую строку, но есть определенные рекомендации, которые помогут.

• Никаких специальных символов. Это включает UTF-8 символов такие как незакодированные фигурные кавычки, а также HTML персонажи ,
• Нет HTML.
• Не более 125 символов.
• Просто определите картину. Нет необходимости ссылаться на него («Это изображение…»).

<! - Плохие альтернативные описания. -> <img src = "/ wp-content / uploads / flamingo.jpg" alt = "« розовый »фламинго."> <img src = "/ wp-content / uploads / flamingo.jpg" alt = "A <em> розовый </ em> фламинго. "> <img src =" / wp-content / uploads / flamingo.jpg "alt =" Фламинго происходит от испанского фламенко, «с цветом пламени», в свою очередь, из Провансаля Фламенк от «пламени» и германо-подобного суффикса с возможным влиянием таких слов, как Флеминг. Подобная этимология имеет латинский греческий термин Phoenicopterus (от греческого: ????????????? phoinikopteros ), буквально «кроваво-красный с перьями». "> <img src =" / wp-content / uploads / flamingo.jpg "alt =" Это изображение розового фламинго. "> <! - Хорошее альтернативное описание. -> <img src = "/ wp-content / uploads / flamingo.jpg" alt = "Розовый фламинго.">

Альтернативное описание - Пользователи

Атрибут alt предоставляет «альтернативное описание» для изображения. Это описание обычно не предоставляется пользователю, но при определенных обстоятельствах:

• Вспомогательная технология - если пользователь с нарушениями зрения и использует программу чтения с экрана, программа чтения с экрана прочитает альтернативное описание для пользователя.
• Изображения отключены - некоторые пользователи предпочитают просматривать веб-страницы с отключенными изображениями (для экономии полосы пропускания или для минимизации отвлечения). Эти пользователи обычно видят альтернативное описание вместо изображения.
• Ошибка изображения. Если изображение не загружается по какой-либо причине (неверное имя файла, проблемы с подключением), пользователь обычно видит альтернативное описание вместо изображения.

Вот пример отображения альтернативного текста вместо неудачного изображения (изображение src указывает на ничто).

<img src = "not-a-real-file-name.jpg" alt = "В зависимости от вашего браузера это сообщение может отображаться вместо сбойного изображения.">

Альтернативное описание - поисковые системы

Альтернативное описание также очень полезно для поисковых систем. Поисковым системам трудно понять, каково содержание изображения на самом деле. Они становятся лучше в этом, но определить предмет фотографии или изображения чрезвычайно сложно , Таким образом, поисковые системы полагаются на альтернативное описание, чтобы узнать, что на самом деле изображено на картинке (они также используют имя файла и другие атрибуты). Кроме того, в Поиске картинок Google, альтернативное описание фактически показывается пользователю.

«Американский фламинго» - это альтернативный текст картины фламинго. Если вы заботитесь о SEO , вы должны убедиться, что у вас есть соответствующие альтернативные описания для всех ваших изображений.

Узнайте больше о Alt

Сколько еще можно узнать о alt? Много. Мы собрали этот учебник по правилам Alt чтобы помочь вам.

Значения атрибута alt

Значение Имя Примечания текст Указывает альтернативный текст для отображения в определенных контекстах.

Все атрибуты IMG Элемент

Имя атрибута Значения Примечания рост Определяет внутреннюю высоту файла изображения в пикселях CSS. srcset список источников Определяет несколько размеров одного и того же изображения, позволяя браузеру выбрать подходящий источник изображения. выравнивать право
left Ранее использовался для указания выравнивания и размещения изображения относительно окружающего текста. Это устарело и не должно использоваться. альт текст Определяет альтернативный текст, который может быть представлен вместо изображения. граница пиксели Ранее использовались для определения границы элемента изображения. Это устарело и больше не должно использоваться. управления Переключатель мультимедиа проигрывателя при использовании в сочетании с атрибутом <code> dynsrc </ code>. Оба атрибута теперь устарели. dynsrc HSPACE Ранее использовался для добавления горизонтального пространства на обеих сторонах изображения. Сейчас не рекомендуется. ISMAP Определяет изображение как карту изображений на стороне сервера. При щелчке по ссылке, содержащей ссылку, координаты мыши будут включены в запрос. longdesc Определяет URL, по которому можно найти дополнительную информацию об изображении. Он был написан из спецификации HTML5, но его статус не так ясен, как другие устаревшие функции. петля Ранее использовался для указания количества раз, которое видео должно проигрываться, когда используется вместе с атрибутом dynsource. Оба атрибута устарели. LOWSRC Указана уменьшенная или менее качественная версия изображения. название Определил изображение или предоставил дополнительную информацию о нем. Устаревший в HTML 4.0 в пользу других атрибутов. naturalsizeflag Этот атрибут ничего не делает. Когда-то он использовался проприетарной системой программного обеспечения. nosave Предназначен для предотвращения загрузки изображения пользователями. Никогда не был частью спецификации HTML и широко не использовался. Начните FileOpen
Mouseover подавлять Используется теперь уже не существующим браузером Netscape для подавления отображения изображения до завершения загрузки изображения. usemap Определяет клиентскую карту изображения, которая будет использоваться с изображением. ширина Указывает внутреннюю ширину изображения в пикселях CSS. ЦСИ Определяет URL изображения, которое будет отображаться. Адам - ​​технический писатель, который специализируется на документации для разработчиков и учебные пособия ,

Поддержка браузера для alt

Похожие

Комментарии