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

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

Рис. 1. Альтернативный текст до загрузки изображения

Рис. 1. Альтернативный текст до загрузки изображения

Некоторые браузеры, в частности Internet Explorer, также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение (рис. 2). Однако с позиции спецификации HTML это не является правильным.

Рис. 2. Вид всплывающей подсказки

Рис. 2. Вид всплывающей подсказки

Замечание

Вид всплывающей подсказки, а именно, ее цвет, фон, шрифт и другие параметры задаются с помощью настроек операционной системы и не могут быть изменены через HTML-файл.

Для создания альтернативного текста используется параметр alt тега <IMG>, как показано в примере 1.

Пример 1. Добавление альтернативного текста

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Альтернативный текст</title>
 </head>
 <body> 
  <p><a href="index.html"><img src="home.gif" 
     alt="Возврат на главную страницу"></a></p> 
 </body> 
</html>

Замечание

Текст в параметре alt обязательно должен быть взят в кавычки.

Не все браузеры отображают альтернативный текст в виде всплывающей подсказки. Поэтому для ее создания используется параметр title (пример 2).

Пример 2. Всплывающая подсказка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Всплывающая подсказка</title>
 </head>
 <body>
  <p><a href="index.html"><img src="home.gif" 
    alt="Вернуться на главную страницу" title="Главная страница"></a></p> 
 </body> 
</html>

Как показано в данном примере, значения у параметров alt и title может различаться, что позволяет установить определенный текст для разных случаев. Только учтите, что длинный текст будет «обрезаться» и целиком не показывается. Но поисковые системы, для которых иной раз и применяют параметры title и alt, вполне читают подобный текст.

Отправить комментарий

  • Строки и параграфы переносятся автоматически.
CAPTCHA
Вопрос для защиты от спама.
1 + 5 =
Решите этот простой пример и введите результат. Так, для 1+3 надо ввести 4.