Тег <img> HTML картинка

Рейтинг: 4 из 5, голосов 7
++++-

Тег <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>

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

Тег Google Chrome Internet Explorer Mozilla FireFox Safari Opera
<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 пиксели

Ширина вертикальных отступов (пустое место сверху и снизу от картинки).

Оцените, насколько полезна эта статья
++++-
Комментарии
20 июня
Anastasia
Мне, как новичку , все предельно ясно из данной статьи. Спасибо;)
Ответить
Оставьте комментарий

Отправляя форму, я даю согласие на обработку персональных данных.