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 Указывает ссылка на элемент , в котором содержатся координаты для клиентской карты-изображения.
vspace pixels Определяет пробелы сверху и снизу изображения.
Не поддерживается в HTML5.
width pixels Устанавливает ширину изображения.

Тег <img> также поддерживает глобальные атрибуты и атрибуты событий.

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





Похожие статьи