HTML тег <img>

❮ Назад Вперед ❯

Тег <img> используется для включения изображений в HTML документ. Само изображение не вставляется напрямую в документ, браузер загружает его из источника, указанного в теге <img>. Для указания источника используется атрибут src.

Чтобы сделать HTML изображения интерактивными, вы должны разместить тег <img> внутри тега <a>, который используется для вставки ссылок..

Синтаксис

Тег <img> одиночный, закрывающий тег не требуется.

Пример

<!DOCTYPE html>
<html>
   <head>
       <title>Заголовок документа</title>
   </head>
   <body>
      <h1>Место для заголовка</h1>
      <p>Это фото малыша</p>
       <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
  </body>
</html>

Попробуйте сами!

Результат

Атрибут src (source) является обязательным, так как он указывает путь к изображению. Значением атрибута src может быть как имя файла, так и его URL.

Атрибут alt также является обязательным для тега <img>. Его значением является поясняющий текст, который показывается в браузере до загрузки изображения. Браузер также показывает этот текст при наведении мыши на изображение.

Мы рекомендуем включать в альтернативный текст ключевые слова. Это позволит улучшить ранжирование веб-сайта в поисковых системах.

Атрибуты

Атрибут	Значение	Описание
align	left right top bottom middle	Устанавливает выравнивание изображения относительно окружающих элементов. Не поддерживается в HTML5.
alt	text	Определяет альтернативный текст для изображения.
border	pixels	Устанавливает толщину рамки вокруг изображения. Не поддерживается в HTML5.
crossorigin
		Определяет, используется ли CORS (технология, которая позволяет предоставить веб-странице доступ к ресурсам другого домена) при загрузке изображения. Изображения, загруженные с помощью CORS могут быть использованы в элементе <canvas> без ограничения функциональности последних.
	anonymous	-CORS запросы от этого элемента не будут передавать учетные данные
	use-credentials	-CORS запросы от этого элемента будут передавать учетные данные. Новый атрибут в HTML5.
height	pixels	Устанавливает высоту изображения.
hspace	pixels	Устанавливает пробелы слева и справа от изображения. Не поддерживается в HTML5.
ismap	ismap	Определяет, что содержимое тега является серверной картой-изображением.
longdesc	URL	Указывает URL адрес с подробным описанием к изображению (Для короткого описания изображения используется атрибут alt. Не поддерживается в HTML5.
src	URL	Определяет источник изображения.
usemap	#mapname	Указывает ссылка на элемент <map>, в котором содержатся координаты для клиентской карты-изображения.
vspace	pixels	Определяет пробелы сверху и снизу изображения. Не поддерживается в HTML5.
width	pixels	Устанавливает ширину изображения.