Html атрибуты тега img: Атрибут alt | htmlbook.ru

HTML тег img

Тег <img> предназначен для вставки изображений в HTML страницу.

Тег <img> имеет два обязательных атрибута: src и alt.

Технически изображения не вставляются в HTML страницу, а подключаются к HTML странице.

Чтобы создать ссылку-изображение на другой документ, поместите элемент <img> внутри тега <a>.

Разница между HTML 4.01 и HTML5

Атрибуты align, border, hspace и vspace не поддерживаются в HTML5.

Различия между HTML и XHTML

HTML тег <img> — одиночный элемент без закрывающего тега. В XHTML тег <img> должен закрываться должным образом, а именно — <img />.

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

Атрибут Описание
align Определяет горизонтальное выравнивание содержимого элемента
alt Определяет альтернативный текст, если элемент не удается отобразить
border Определяет толщину рамки вокруг элемента
height Определяет высоту изображения
hspace Определяет величину отступов слева и справа от изображения
ismap Определяет, что изображение является серверной картой-изображением.
longdesc Определяет гиперссылку на подробное описание изображения
src Определяет URL изображения
usemap Определяет картинку, как клиентскую карту-изображение
vspace Определяет величину отступов сверху и снизу от изображения
width Определяет ширину изображения

Общие атрибуты

Тег <img> поддерживает общие атрибуты и атрибуты-события.

CSS стили по умолчанию

Большинство браузеров будут отображать тег <img> со следующими стилями

img { 
    display: inline-block;
}

HTML пример использования

Вставляем изображение:

<img src='smiley.gif' alt="Smiley face">

Тег img — картинка на сайте

Тег img создает картинку. Путь к картинке прописывается в атрибуте src. Не требует закрывающего тега.

Атрибуты

Атрибут Описание
src Задает путь к картинке.
Обязательный атрибут.
alt Альтернативный текст, который будет показан вместо картинки, если она не найдена (к примеру, неправильно прописан путь к ней).
Обязательный атрибут. При его отсутствии будет ругаться валидатор (программа, которая проверяет корректность HTML или CSS).
width Ширина картинки, в пикселях (в этом случае единицы измерения не указываются) или процентах от родителя картинки.
height Высота картинки, в пикселях (в этом случае единицы измерения не указываются) или процентах от родителя картинки.

Нюансы

Если для картинки не задана ни ширина, ни высота — картинка будет иметь свой реальный размер. Если задана высота — картинка станет заданной высоты, а по ширине подстроится так, чтобы ее пропорции не были искажены.

Если задана только ширина — аналогично, картинка подстроится по высоте так, чтобы сохранить пропорции.

Если задана и ширина, и высота — пропорции картинки могут быть искажены (а может и нет, как угадаете). Если ширина или высота (или оба вместе) больше реальной — картинка увеличится, но потеряет в качестве.

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

Не рекомендуется уменьшать реальные размеры картинки без необходимости. К примеру, реальный размер картинки 1000 на 1000 пикселей, а вы ей зададите ширину в 100px. В этом случае картинка на экране будет выглядеть на 100

пикселей, однако иметь размер на всю тысячу и, соответственно, загружаться намного дольше.

Пример

Давайте на сайт добавим картинку и не будем задавать атрибуты height и width. Картинка будет иметь свой реальный размер:

<img src="monkey.png" alt="обезьянка">

:

Пример

Давайте попробуем картинке добавить ширина с помощью атрибута width, высота при этом должна подстроиться так, чтобы сохранить пропорции картинки:

<img src="monkey.png" alt="обезьянка">

:

Пример

А теперь давайте картинке добавим высоту с помощью атрибута height, ширина при этом подстроится так, чтобы сохранить пропорции картинки:

<img src="monkey. png" alt="обезьянка">

:

Пример

Давайте одновременно картинке добавим и высоту, и ширину. Пропорции картинки при этом должны стать искаженными (не обязательно, но в данном случае высота и ширина подобраны так, чтобы пропорции исказились):

<img src="monkey.png" alt="обезьянка">

:

Пример

Давайте поставим неправильный путь к картинке (для простоты оставим его пустым). Вместо картинки мы увидим содержимое атрибута alt (кажется, что это обычный текст — но попробуйте его скопировать — у вас ничего не получится, он будет тянутся как картинка):

<img src="" alt="обезьянка">

:

Смотрите также

  • свойство width,
    которое задает ширину элемента
  • свойство height,
    которое задает ширину элемента
  • свойство background-image,
    которое задает фоновую картинку

Тег HTML 5

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

Значение атрибута src — это URL-адрес внедренного изображения. Атрибут srcset также можно использовать для указания разных изображений для использования в разных ситуациях (например, на дисплеях с высоким разрешением, небольших мониторах и т. д.). Значение атрибута alt отображается, если изображение не может быть загружено.

Чтобы связать изображение с другим документом, просто вставьте

тега внутри тега.

Демо

Атрибуты

Теги HTML могут содержать один или несколько атрибутов. Атрибуты добавляются к тегу, чтобы предоставить браузеру больше информации о том, как тег должен выглядеть или вести себя. Атрибуты состоят из имени и значения, разделенных знаком равенства (=), при этом значение заключено в двойные кавычки. Вот пример: style="color:black;" .

Существует 3 типа атрибутов, которые вы можете добавить к своим HTML-тегам: специфичные для элемента, глобальные атрибуты и атрибуты содержимого обработчика событий.

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

Специфичные для элемента атрибуты

В следующей таблице показаны атрибуты, характерные для этого тега/элемента.

Атрибут Описание
alt Альтернативный текст. Это указывает текст, который будет использоваться в случае, если браузер/агент пользователя не может отобразить изображение.
источник URL изображения.
srcset

Список изображений, разделенных запятыми, для использования в различных ситуациях (например, дисплеи с высоким разрешением, маленькие мониторы и т. д.).

За каждым URL-адресом изображения может следовать пробел и дескриптор. Дескриптор, если он есть, может быть одним из следующих:

  • Дескриптор ширины (положительное целое число, за которым непосредственно следует w ). Дескриптор ширины делится на исходный размер, указанный в атрибуте размеров, для вычисления эффективной плотности пикселей.
  • Дескриптор плотности пикселей (положительное число с плавающей запятой, за которым непосредственно следует
    x
    ).
размеров Размеры изображений между контрольными точками.
crossorigin Этот атрибут является атрибутом настроек CORS. CORS расшифровывается как Cross-Origin Resource Sharing . Назначение атрибута crossorigin — позволить вам настроить запросы CORS для извлеченных данных элемента. Значения для 9Перечислены атрибуты 0003 crossorigin .

Возможные значения:

Значение Описание
анонимный Запросы CORS из разных источников для элемента не будут иметь установленного флага учетных данных. Другими словами, не будет обмена учетными данными пользователя через файлы cookie, SSL-сертификаты на стороне клиента или HTTP-аутентификацию.
use-credentials Запросы CORS между источниками для элемента будут иметь установленный флаг учетных данных.

Если этот атрибут не указан, CORS вообще не используется.

Недопустимое ключевое слово и пустая строка будут обрабатываться как анонимное значение .

ismap Для карт изображений. См. тег карты HTML
usemap Для карт изображений. См. тег карты HTML
ширина Задает ширину изображения.
высота Задает высоту изображения.
referrerpolicy Политика Referrer для выборок, инициированных элементом.
longdesc URL-адрес, содержащий ссылку на расширенное описание изображения.
расшифровка

Указывает предпочтительный метод декодирования этого изображения. Атрибут, если он присутствует, должен быть подсказкой по декодированию изображения. Отсутствующее значение по умолчанию для этого атрибута и недопустимое значение по умолчанию для этого атрибута являются автоматическим состоянием.

Этот атрибут определен только в HTML Living Standard (т. е. его нет в спецификациях W3C HTML).

loading Это атрибут отложенной загрузки. Его цель — указать политику загрузки изображений, находящихся за пределами области просмотра.

Возможные значения:

Ключевое слово Описание
ленивый Используется для отсрочки получения ресурса до тех пор, пока не будут выполнены некоторые условия.
жаждущий Используется для немедленной загрузки ресурса; состояние по умолчанию.

Этот атрибут определен только в HTML Living Standard (т. е. его нет в спецификациях W3C HTML).

Глобальные атрибуты

Следующие атрибуты являются стандартными для всех тегов HTML 5 (хотя атрибут tabindex не применяется к элементам диалога ).

  • ключ доступа
  • автокапитализация
  • класс
  • редактируемый контент
  • данные-*
  • директор
  • перетаскиваемый
  • скрытый
  • идентификатор
  • режим ввода
  • это
  • ИД товара
  • itemprop
  • Артикул
  • предметная область
  • тип изделия
  • язык
  • часть
  • слот
  • проверка правописания
  • стиль
  • tabindex
  • Название
  • перевод

Полное объяснение этих атрибутов см. в разделе Глобальные атрибуты HTML 5.

Атрибуты содержимого обработчика событий

Атрибуты содержимого обработчика событий позволяют вам вызывать сценарий из вашего HTML. Скрипт вызывается, когда происходит определенное «событие». Каждый атрибут содержимого обработчика событий имеет дело с другим событием.

  • прерывание
  • onauxclick
  • размытие
  • при отмене
  • онканплей
  • oncanplaythrough
  • при смене
  • по клику
  • при закрытии
  • в контекстном меню
  • онкопия
  • при обмене
  • врезной
  • ondblclick
  • ондраг
  • ондрагенд
  • ондрагентер
  • ондрагзит
  • на накладке
  • ондраговер
  • ондрагстарт
  • впускной
  • ondurationchange
  • при опорожнении
  • одноконцевой
  • при ошибке
  • онфокус
  • данные формы
  • на входе
  • недействительный
  • нажатие клавиши
  • нажатие клавиши
  • onkeyup
  • onlanguagechange
  • под нагрузкой
  • загруженные данные
  • загруженные метаданные
  • запуск при загрузке
  • по нажатию мыши
  • onmouseenter
  • для мышей
  • onmousemove
  • onmouseout
  • при наведении мыши
  • на мышке вверх
  • паста
  • при паузе
  • в игре
  • в игре
  • в процессе
  • при изменении скорости
  • при сбросе
  • при изменении размера
  • при прокрутке
  • нарушение политики безопасности
  • onseeked
  • поиск
  • по выбору
  • при смене слота
  • установлен
  • при отправке
  • приостановить
  • своевременное обновление
  • нагрудник
  • при изменении объема
  • в ожидании
  • на колесе

Полный список обработчиков событий см. в разделе Атрибуты содержимого обработчиков событий HTML 5.

Ссылка на HTML 4.01 и XHTML 1.0: тег

Синтаксис Синтаксис HTML . Этот элемент не требует закрывающего тега.
  

Синтаксис XHTML . Этот элемент открывается и закрывается внутри одного тега путем добавления пробела, за которым следует косая черта в конце тега.
  
Применение Тег используется для встраивания изображения в веб-страницу. Отображаемое изображение определяется атрибутом src . Если изображение не может быть отображено, будет отображаться текст, содержащийся в атрибуте alt .

HTML Пример тега с атрибутами src, height и width .

 eight ball 

XHTML Пример тега с использованием атрибутов src, высоты и ширины .

 восемь шаров 
Модель содержимого Элемент не может содержать никаких тегов.
Видеоруководство

Учебное пособие по тегам img

В этом видео показано, как использовать тег img HTML/XHTML и как стилизовать его с помощью CSS. Примеры охватывают базовое использование тега img и демонстрируют свойства CSS float, margin и display. Также рассматриваются обтекание текста вокруг изображения и центрирование изображения.

Красные атрибуты устарели

Обязательно Специфический тег Ядро Фокус События Язык
альтернативный источник выровнять высоту границы hspace ismap longdesc name 1 usemap vspace width название стиля класса id   onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup директория lang xml:lang 2
Примечания:
1. Устарело в XHTML.
2. Только XHTML.

Красные атрибуты устарели

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

Пример тега HTML с использованием атрибута alt .

 eightball 

Пример тега XHTML с использованием атрибута alt .
 eightball 

Примечание. Это обязательный атрибут.

src Атрибут src используется для указания URL-адреса отображаемого изображения.

HTML Пример тега с использованием атрибута src .

 eight ball 

XHTML Пример тега с использованием атрибута src .

 eightball 

Примечание. Это обязательный атрибут.
align Атрибут align определяет положение изображения. Значение «нижний», «средний» или «верхний» указывает положение относительно окружающего текста. значение «влево» или «вправо» перемещает изображение влево или вправо.

HTML Пример тега с использованием атрибута align .

 <дел>
восемь шаров
Это выровнено по верхнему краю.

Этот текст начинается с нового абзаца.

<час> <дел> восемь мячей Это выравнивание по середине.

Этот текст начинается с нового абзаца.

<час> <дел> восемь шаров Это выравнивание по нижнему краю.

Этот текст начинается с нового абзаца.

<час> <дел> восемь шаров Это выровнено по левому краю.

Этот текст начинается с нового абзаца.

<час> <дел> восемь шаров Это выровнено по правому краю.

Этот текст начинается с нового абзаца.

XHTML Пример тега с использованием атрибута align .

 <дел>
восемь шаров
Это выровнено по верхнему краю.

Этот текст начинается с нового абзаца.

<ч /> <дел> восемь мячей Это выравнивание по середине.

Этот текст начинается с нового абзаца.

<ч /> <дел> восемь шаров Это выравнивание по нижнему краю.

Этот текст начинается с нового абзаца.

<ч /> <дел> восемь шаров Это выровнено по левому краю.

Этот текст начинается с нового абзаца.

<ч /> <дел> восемь шаров Это выровнено по правому краю.

Этот текст начинается с нового абзаца.


Примечание. Этот атрибут устарел.
граница Атрибут граница используется для указания ширины в пикселях границы, окружающей изображение.

HTML Пример тега с использованием атрибута border .

 eight ball 

XHTML Пример тега с использованием атрибута border .

 eight ball 

Примечание. Этот атрибут устарел.
высота Атрибут высота используется для указания высоты изображения. Значение указывается в пикселях или в процентах, если за ним следует знак процента (%). Если значение указано в процентах, оно относится к проценту доступного пространства.

HTML Пример тега с высотой и атрибуты ширины .

 eight ball 

XHTML Пример тега с использованием атрибутов height и width .

 eight ball 
hspace Атрибут hspace определяет количество пустого пространства в пикселях слева и справа от изображения .

HTML Пример тега с использованием атрибута hspace .

 eightball

Пример тега eight ball

XHTML с использованием атрибута hspace .

 восемь шаров

eight ball

Примечание. Этот атрибут устарел.
ismap Атрибут ismap используется для указания использования карты изображения на стороне сервера. Изображение должно находиться внутри элемента привязки . Элемент привязки создается с помощью тега .
longdesc Атрибут longdesc используется для указания URL-адреса длинного описания изображения.

Пример тега HTML с использованием атрибута longdesc .

  gif" alt="circle" longdesc="img_info.html"> 

Пример тега XHTML с использованием атрибута longdesc .
 circle 
name Атрибут name используется для именования элемента изображения. Это позволяет таблицам стилей или сценариям ссылаться на элемент.

Атрибут имени устарел в XHTML, но не в HTML. Для XHTML 9Вместо этого можно использовать атрибут 0164 id . Для повышения прямой и обратной совместимости для атрибутов name и id можно установить одно и то же значение.

Пример тега HTML с использованием атрибута name

 circle 

Пример тега XHTML с использованием атрибута имени
  gif" alt="circle" name="eight" /> 

Примечание. Устарело в XHTML.

usemap Атрибут usemap используется с картами изображений на стороне клиента. Атрибут usemap используется для указания на карту изображения, определенную с помощью тега .

Теги , и могут работать вместе, позволяя определять интерактивные области на изображении. Сначала изображение указывается с помощью тег. Затем тег используется для указания карты изображения на стороне клиента. Тег содержит один или более тегов . Каждый тег определяет интерактивную область и соответствующую ссылку.

Атрибут usemap в теге используется для указания на тег . Это достигается установкой атрибутов name и id в тег к соответствующему значению.

Пример тега HTML с использованием атрибута usemap .

 

формы изображений <имя карты="фигуры"> прямоугольник circle <площадь формы="поли" координаты="220,0,232,83,296,34" href="tri.html" alt="poly">

XHTML Пример тега с использованием атрибута usemap .

 

формы изображений <имя карты="фигуры"> rectangle circle <площадь формы="поли" координаты="220,0,232,83,296,34" href="tri.html" alt="poly" />

vspace Атрибут vspace указывает количество пустого пространства в пикселях над и под изображением.

HTML Пример тега с использованием атрибута vspace .

 

Для следующего изображения не задан vspace.

<р> восемь шаров

На следующем изображении значение vspace равно 50.

<р> восемь мячей

XHTML Пример тега с использованием атрибута vspace .

 

Для следующего изображения не задан vspace.

<р> восемь шаров

На следующем изображении значение vspace равно 50.

<р> gif" alt="восемь мячей" vspace="50" />


Примечание. Этот атрибут устарел.
ширина Атрибут ширина используется для указания ширины изображения. Значение указывается в пикселях или в процентах, если за ним следует знак процента (%). Если значение указано в процентах, оно относится к проценту доступного пространства.

HTML Пример тега с использованием атрибутов height и width .

 eightball 

XHTML Пример тега с использованием атрибутов height и width .

 eight ball 
id Атрибут id присваивает тегу уникальное имя. Это позволяет таблицам стилей или сценариям ссылаться на тег. См. пример id
class Атрибут class присваивает тегу имя класса. Имя класса не обязательно должно быть уникальным. Одно и то же имя класса может иметь более одного тега. Это позволяет таблицам стилей или сценариям ссылаться на несколько тегов с одним именем класса. См. пример класса
стиль Атрибут стиль определяет стили для тега. Для каскадных таблиц стилей (CSS) используется следующий синтаксис имя:значение. Каждая пара имя:значение отделяется точкой с запятой. См. пример стиля
title Атрибут title указывает дополнительную информацию о теге. Обычно браузеры отображают заголовок, когда указывающее устройство останавливается над объектом. См. заголовок Пример
onclick Атрибут onclick указывает скрипт, запускаемый при щелчке объекта мышью или другим указывающим устройством. См. пример onclick
ondblclick Атрибут ondblclick указывает скрипт, запускаемый при двойном щелчке объекта мышью или другим указывающим устройством. См. пример ondblclick
onkeydown Атрибут onkeydown указывает скрипт, который будет запускаться при нажатии клавиши. См. Пример 9 при нажатии клавиши0045
onkeypress Атрибут onkeypress определяет скрипт, который будет запускаться при нажатии и отпускании клавиши. См. Пример onkeypress
onkeyup Атрибут onkeyup указывает скрипт, запускаемый при отпускании клавиши. См. Пример onkeyup
onmousedown Атрибут onmousedown указывает сценарий, запускаемый при нажатии кнопки мыши или другой кнопки указывающего устройства над объектом. См. пример onmousedown
onmousemove Атрибут onmousemove определяет сценарий, запускаемый при перемещении мыши или другого указывающего устройства над объектом. См. пример onmousemove
onmouseout Атрибут onmouseout указывает сценарий, запускаемый, когда мышь или другое указывающее устройство перемещается от объекта после того, как он был над ним. См. Пример onmouseout
onmouseover Атрибут onmouseover указывает сценарий, запускаемый при перемещении мыши или другого указывающего устройства на объект. См. пример onmouseover
onmouseup Атрибут onmouseup указывает сценарий, запускаемый при отпускании кнопки мыши или другой кнопки указывающего устройства над объектом. См. пример onmouseup
dir dir 9Атрибут 0165 сообщает браузеру, должен ли текст отображаться слева направо или справа налево. Он не меняет направление символов на противоположное, как это делает тег , но может помочь браузеру определить, должен ли текст быть выровнен по левой или правой стороне. См. пример dir
lang Атрибут lang определяет язык. Этот атрибут может помочь браузеру правильно отображать текст. Этот атрибут также может быть полезен для программного обеспечения для перевода по Брайлю, синтезаторов речи, словарных определений и т. д. См. lang, пример 9.0045
xml:lang Атрибут xml:lang указывает язык для документов XHTML. Этот атрибут может помочь браузеру правильно отображать текст. Этот атрибут также может быть полезен для программного обеспечения для перевода по Брайлю, синтезаторов речи, определений словарей и т. д. См. пример xml:lang

. Примечание: только XHTML.


Пример тега с использованием атрибутов src, высоты и ширины .

Добавить комментарий

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