<img>

Элемент <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG, SVG или PNG. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив <img> в контейнер <a>.

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

Закрывающийся тег:

Не требуется

Поддержка:

HTML4 и выше

Атрибуты:

align - Определяет, как рисунок будет выравниваться по краю и способ обтекания текстом.
alt - Альтернативный текст для изображения.

<img  src="/home/web.jpg" alt="Веб-программирование">

border - Толщина рамки вокруг изображения.
height - Высота изображения.

<img  src="/home/web.jpg" width="300" height="250" alt="Веб-программирование">

hspace - Горизонтальный отступ от изображения до окружающего контента.
ismap - Говорит браузеру, что картинка является серверной картой-изображением.

<img  src="/home/web.jpg" width="300" height="250" alt="Веб-программирование" ismap>

longdesc - Указывает адрес документа, где содержится аннотация к картинке.
sizes - Задаёт размеры изображения для разных макетов страницы.

<img  src="/home/web.jpg" sizes="(max-width: 300px) 300px, (min-width: 300px) 250px" alt="Веб-программирование">

src - Путь к графическому файлу.

<img  src="/home/web.jpg" alt="Веб-программирование">

srcset - Путь к графическим файлам с учётом размера изображения и устройств.

<img  src="/home/web.jpg"  srcset  = "home/ekaterina/web_all.jpg 3x"  alt="Веб-программирование">

vspace - Вертикальный отступ от изображения до окружающего контента.
width - Ширина изображения.

<img  src="/home/web.jpg" width="300" height="250" alt="Веб-программирование">

usemap - Ссылка на элемент <map>, содержащий координаты для клиентской карты-изображения.

<img  src="/home/web.jpg"  width="300" height="250" alt="Веб-программирование" usemap="#Navigation">

Также для этого элемента доступны универсальные атрибуты и события.

Пример:

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title> тег <img> </title>
 </head>
 <body> 
  <p><a href="/home/web.html"><img  src="/home/web.jpg" 
  width="300" height="250" alt="Веб-программирование"></a></p>
 </body>
</html>