Тег <img> используется для вставки графического изображения (картинки) в HTML документ.
HTML тег <img> имеет два обязательных атрибута: src - адрес файла картинки и alt - альтернативный текст, который будет отображен, если картинка не может быть загружена. Также не лишним будет использование глобального атрибута title.
Изображение из тега <img> может быть ссылкой. Для этого нужно обвернуть тег <img> тегом ссылки <a> (см. пример ниже).
Синтаксис
<img src="URL_картинки" alt="альтернативный текст">Отображение в браузере
Пример использования <img> в HTML коде
<!DOCTYPE html>
<html>
<head>
<title>Вставка картинки в HTML документ</title>
</head>
<body>
<!-- Картинка на веб-странице -->
<img src="the-eiffel-tower.jpg" alt="Эйфелева башня" title="Эйфелева башня">
<!-- картинка-ссылка -->
<a href="page.html"><img src="the-eiffel-tower.jpg" alt="Эйфелева башня" title="Эйфелева башня"></a>
</body>
</html>Поддержка браузерами
| Тег |  |
 |
 |
 |
 |
| <img> | Да | Да | Да | Да | Да |
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| alt | текст |
Альтернативный текст, который будет выведен, если картинка не будет загружена. |
| height | пиксели |
Высота изображения. |
| ismap |
ismap |
Логический атрибут. Указывает, что картинка является серверной (server-side) картой-изображением. |
| longdesc | URL |
URL файла, где содержится детальное описание картинки. |
| src | URL |
Указывает URL файла картинки. |
| usemap | id_map_элемента |
Указывает, что картинка является клиентской (client-side) картой-изображением. |
| width | пиксели |
Ширина изображения. |
Устаревшие атрибуты
Указанные ниже атрибуты не поддерживаются в HTML5. Используйте CSS вместо них.
| Атрибут | Значение | Описание |
|---|---|---|
| align | top bottom middle left right |
Правило выравнивания картинки. |
| border | пиксели |
Ширина границ картинки. |
| hspace | пиксели |
Ширина горизонтальных отступов (пустое место слева и справа от картинки). |
| vspace | пиксели |
Ширина вертикальных отступов (пустое место сверху и снизу от картинки). |
Если вкратце:
Чтобы сделать отступ от изображения, вы можете использовать CSS-свойство margin (например, "margin: 15px;" - отступ 15 пикселей со всех сторон картинки, "margin-right: 10px;" - отступ 10 пикселей справа).
Границу можно сделать с помощью CSS-свойства border (например, "border: 1px solid black;" - черная линия шириной 1 пиксель).
Для выравнивания картинки есть много способов. Тут уже зависит от ваших потребностей. Для выравнивания по центру блока (по горизонтали), например, можете использовать CSS-правило: "text-align: center;" у родительского блока.
Как подключить CSS к вашей странице описано в этой статье.