Главная/ HTML справочник | HTML теги: назначение, синтаксис, атрибуты, примеры./ Tags/ HTML тег img | назначение, синтаксис, атрибуты, примеры

Тег img

Последнее обновление: 23.01.2011

Тег <img> (англ. image — изображение) добавляет на страницу изображение (картинку).
Строчный элемент.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис


<img src="URL" alt="..."/>

Атрибуты



align задает выравнивание рисунка и способ обтекания текстом

  • bottom — нижняя граница картинки выравнивается по окружающему тексту (по умолчанию)
  • left — по левому краю окна. Текст обтекает справа
  • middle — центр картинки по базовой линии текущей строки
  • right — по правому краю окна. Текст обтекает слева
  • top — верх картинки выравнивается по самому высокому элементу строки

Не проходит валидацию XHTML 1.0 Scrict, XHTML 1.1, HTML 4.01 Strict

alt альтернативный текст
border толщина рамки
Не проходит валидацию XHTML 1.0 Scrict, XHTML 1.1, HTML 4.01 Strict
class определяет имя используемого класса
controls флаг. Когда установлен, отображает кнопки для просмотра видеофайла
Отсутствует в спецификации HTML 4.01!
dir определяет направление символов:

  • ltr — слева направо
  • rtl — справа налево
dynsrc URL видеофайла для проигрываия
Отсутствует в спецификации HTML 4.01!
height задает высоту рисунка
hspace отступ по горизонтали (по умолчанию 0)
id уникальный идентификатор
ismap флаг, определяющий, что картинка является картой-изображением
lang определяет язык отображаемого документа
longdesc URL страницы с полным описанием изображения
loop сколько раз прокручивать видео. Значение по умолчанию -1, бесконечное воспроизведение
Отсутствует в спецификации HTML 4.01!
lowsrc URL графического файла с низким разрешением. Загрузиться и отобразится до загрузки основной картинки.
Отсутствует в спецификации HTML 4.01!
name уникальное имя изображения
onclick щелчок на элементе
ondblclick двойной щелчок на элементе
onkeydown нажатие клавиши, когда элемент имеет фокус
onkeypress нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown нажатие кнопки мыши, когда элемент имеет фокус
onmousemove движение указателя мыши, когда элемент имеет фокус
onmouseout смещение указателя мыши с элемента
onmouseover помещение указателя мыши на элемент
onmouseup освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
src URL графического файла, отображаемого на странице
start когда начинать воспроизведение видео

  • fileopen — сразу после загрузки (по умолчанию)
  • mouseover — после наведения курсора мыши

Отсутствует в спецификации HTML 4.01!
style задает встроенную таблицу стилей
title всплывающая подсказка
usemap применяет к изображению карту <MAP>
vspace отступ по вертикали (по умолчанию 0)
width задает ширину картинки

Пример

Вставим картинку:


<img alt="hr" src="hr.png" width="200" height="87" border="2"/>

Тег <img> совместно с тегами <map> и <area> используются для создания карт-изображений:


<map name="myMap">
<area nohref="nohref" alt="тут ссылки нет" title="тут ссылки нет" shape="circle" coords="70,138,39"/>
<area href="#" alt="Серая зона" title="Серая зона" shape="rect" coords="20,10,118,188"/>
<area href="#" alt="Желтая зона" title="Желтая зона" shape="poly" coords="175,30,270,100,200,150"/>
</map>
<img src="map.png" width="300" height="200" alt="карта" usemap="#myMap"/>

Результат:

тут ссылки нет Серая зона Желтая зона

карта

Рекомендации по использованию

  • должен быть закрыт слешем (<img…/>)
  • обязательные атрибуты: src, alt
  • задавайте атрибуты width и height, это позволяет браузеру заранее зарезервировать место в памяти и не будет сам расчитывать размеры картинки, что положительно сказывается на скорости загрузки страницы
  • не изменяйте размер картинки атрибутами width и height — это искажает изображение и не влияет на вес файла, используйте для таких целей специальные редакторы
  • для предсказуемого кроссбраузерного отображения картинок явно указывайте бордюры (свойство border)
  • содержание атрибута alt активно используется поисковыми системами и произносится голосовыми браузерами
  • разница между атрибутами alt и title — alt определяет текст, который пользователь увидит вместо картинки (в случае, если, например, картинки отключены в настройках браузера), а title — вместе с картинкой, в виде всплывающей подсказки
  • особенность IE6-7: при отсутствии атрибута title всплывает подсказка, текст которой берется у alt
  • атрибуты тега <img>, предназначенные для воспроизведения видео не входят в спецификацию HTML 4.01 и некорректно обрабатываются большинством браузеров, для воспроизведения видео используйте тег <object>
  • не рекомендуем использовать атрибуты align и border (не проходит валидацию XHTML 1.0, XHTML 1.1, HTML 4.01 Strict + засоряет код), вместо них применяйте таблицы стилей
  • используйте тег <img> только в контентной части документа, графику оформления страниц прячьте в CSS (background) — получится более чистый код
Твой код:

Результат: