HTML тег <img>

HTML теги

Значение и применение

Изображения в HTML документе определяются тегом <img>.

Обращаю Ваше внимание, что элемент <img> имеет два обязательных атрибута: src, который определяет URL адрес изображения (допускается использовать как абсолютный, так и относительный адрес) и alt, который указывает альтернативный текст для изображения (для того случая, если изображение по каким-то причинам не было загружено).

Поддержка браузерами

ТегChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
<img>ДаДаДаДаДаДа

Атрибуты

АтрибутЗначениеОписание
alignleft
right
top
bottom
middle
Не поддерживается в HTML5.
Определяет выравнивание изображения в соответствии с окружающими элементами.
alttextОпределяет альтернативный текст для изображения (для того случая, если изображение по каким-то причинам не было загружено). Является обязательным атрибутом.
borderpixelsНе поддерживается в HTML5.
Определяет ширину границы вокруг изображения.
crossoriginhtml5anonymous
use-credentials
Атрибут определяет, используется ли CORS при загрузке изображения. Изображения, загруженные с помощью CORS, могут использоваться в элементах <canvas>, при этом функциональность последних не ограничивается.
У этого атрибута есть 2 допустимых значения:
anonymous
В этом случае перед загрузкой изображения выполняется кросс-доменный запрос (Origin: HTTP header), при этом не передаются параметры доступа (такие как: cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). В ответе сервера должен присутствовать заголовок Access-Control-Allow-Origin: HTTP header, иначе, использование изображения в <canvas> ограничивается.
use-credentials
Перед загрузкой изображения выполняется кросс-доменный запрос (Origin: HTTP header) с указанием параметров доступа (в виде - cookie, сертификата или пары логин/пароль). В ответе сервера должен присутствовать заголовок Access-Control-Allow-Origin: HTTP header, иначе, использование изображения в <canvas> ограничивается.
Если данный атрибут не задан, то CORS при загрузке изображения не используется (отсутствует заголовок Origin: HTTP header), и как следствие, использование изображения в <canvas> ограничивается всегда. При неверном значении атрибута (содержится некорректное значение) используется значение anonymous.
heightpixelsОпределяет высоту изображения.
hspacepixelsНе поддерживается в HTML5.
Определяет пробелы слева и справа от изображения.
ismapismapСообщает браузеру, что изображение является серверной картой-изображением.
longdescURLОпределяет URL адрес с аннотацией к изображению (URL более длинного, чем в атрибуте alt, описания изображения).
srcURLЗадает URL адрес изображения (допускается использовать как абсолютные, так и относительные адреса). Является обязательным атрибутом.
usemap#mapnameСсылается на элемент <map>, содержащий координаты для клиентской части карты-изображения.
vspacepixelsНе поддерживается в HTML5.
Определяет пробелы сверху и снизу изображения.
widthpixelsОпределяет ширину изображения.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <img></title>
	</head>
	<body>
		<img src = "10.jpg" alt = "ничоси" width = "200" height = "200" title = "ничоси">
	</body>
</html>

Результат добавления изображения, с помощью тега <img> на HTML страницу:

Пример использование тега <img> в HTML документе.
Пример использование тега <img> в HTML документе.

Изображение как ссылка

Допускается использование изображения в качестве ссылки, для этого необходимо поместить наше изображение (тег <img>) между отрывающим и закрывающим тегом <a>:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования изображения в качестве ссылки</title>
	</head>
	<body>
		<a href = "http://yandex.ru">
			<img src = "10.jpg" alt = "Поиск в Яндекс">
		</a>
	</body>
</html>

При этом при клике по картинке будет осуществлён переход по заданой ссылке (в нашем случае откроется сайт компании Яндекс):

Поиск

Отличия HTML 4.01 от HTML 5

В HTML 5 была прекращена поддержка атрибутов align, border, hspace, vspace.

Значение CSS по умолчанию

img {
display: inline-block;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML теги