Тег img в HTML

Значение тега img в HTML

Тег <img> применяется для показа графического файла в HTML документе. Элемент <img> — это наиболее простой способ отображения статического изображения на странице. Обычно его используют когда изображение является частью контента (в отличие от использования его как части дизайна страницы).

Необходимыми атрибутами для тега <img> являются: src — указывающий адрес файла (URL); alt — альтернативный текст, отображающийся при незагрузке изображения.

<img src="URL" alt="текст вместо изображения">
<img src="image.png" alt="описание избражения">
Обязательные атрибуты тега img

Возможно применение изображения тега <img> в качестве ссылки при помещении его в тег <a>. Интерактивности контенту добавит применение элемента <img> в виде карт-изображений, когда выделяются активные области наложением ссылок на картинку. Внешний вид карты никак не отличается от изображения: возможно его разбитие на невидимые зоны различной формы для вставки ссылок.

<a href="https://domhtml.ru/"><img src="image.png" width="320" height="280" alt="сайт"></a>
Вложение тега img в тег a

Атрибуты тега img

srcзадает URL-адрес отображаемого изображения.
altопределяет альтернативный текст, который представлен вместо изображения.
heightопределяет внутреннюю высоту файла изображения в пикселях.
widthопределяет внутреннюю ширину изображения в пикселях.
usemapзадает карту изображения на стороне клиента, которая будет использоваться с изображением.
ismapопределяет изображение как карту-изображения на стороне сервера.
longdescопределяет URL-адрес, по которому можно найти дополнительную информацию об изображении.
crossoriginуказывает, что заголовки CORS должны использоваться в HTTP-запросе, и указывает, следует ли использовать учетные данные.
srcsetопределяет несколько размеров одного и того же изображения, позволяя браузеру выбрать соответствующий источник изображения.

Для более корректного отображения изображения на экранах различной ширины и размеров окон необходимо использование атрибута srcset.

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *