Тэг изображение в html. Картинка в HTML – все о теге IMG. Отличия между HTML и XHTML

HTML теги

Значение и применение

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

Обращаю Ваше внимание, что элемент имеет два обязательных атрибута : src , который определяет URL адрес изображения (допускается использовать как абсолютный, так и относительный адрес) и alt , который указывает альтернативный текст для изображения (для того случая, если изображение по каким-то причинам не было загружено).

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

Тег
Opera
IExplorer
Edge
Да Да Да Да Да Да

Атрибуты

Атрибут Значение Описание
align left
right
top
bottom
middle 		Не поддерживается в HTML5.
Определяет выравнивание изображения в соответствии с окружающими элементами.
alt text Определяет альтернативный текст для изображения (для того случая, если изображение по каким-то причинам не было загружено).
border pixels Не поддерживается в HTML5.
Определяет ширину границы вокруг изображения.
crossorigin anonymous
use-credentials 		Атрибут определяет, используется ли при загрузке изображения. Изображения, загруженные с помощью CORS , могут использоваться в элементах , при этом функциональность последних не ограничивается.
У этого атрибута есть 2 допустимых значения :
anonymous
В этом случае перед загрузкой изображения выполняется кросс-доменный запрос (Origin: HTTP header), при этом не передаются параметры доступа (такие как: cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). В ответе сервера должен присутствовать заголовок Access-Control-Allow-Origin: HTTP header , иначе, использование изображения в ограничивается.
use-credentials
Перед загрузкой изображения выполняется кросс-доменный запрос (Origin: HTTP header) с указанием параметров доступа (в виде - cookie, сертификата или пары логин/пароль). В ответе сервера должен присутствовать заголовок Access-Control-Allow-Origin: HTTP header , иначе, использование изображения в ограничивается.
Если данный атрибут не задан, то CORS при загрузке изображения не используется (отсутствует заголовок Origin: HTTP header), и как следствие, использование изображения в ограничивается всегда. При неверном значении атрибута (содержится некорректное значение) используется значение anonymous .
height pixels Определяет высоту изображения.
hspace pixels Не поддерживается в HTML5.
Определяет пробелы слева и справа от изображения.
ismap ismap Сообщает браузеру, что изображение является серверной картой-изображением.
longdesc URL Определяет URL адрес с аннотацией к изображению (URL более длинного, чем в атрибуте alt , описания изображения).
src URL Задает URL адрес изображения (допускается использовать как абсолютные, так и относительные адреса). Является обязательным атрибутом.
usemap #mapname Ссылается на элемент , содержащий координаты для клиентской части карты-изображения.
vspace pixels Не поддерживается в HTML5.
Определяет пробелы сверху и снизу изображения.
width pixels Определяет ширину изображения.

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

Пример использования тега <img><span> src = "10.jpg" alt = "ничоси" width = "200" height = "200" title = "ничоси" >

Результат добавления изображения, с помощью тега на HTML страницу.

Описание

Тег предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src . Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег в контейнер . При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0" в тег .

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

Синтаксис

Атрибуты

Определяет как рисунок будет выравниваться по краю и способ обтекания текстом. Альтернативный текст для изображения. Толщина рамки вокруг изображения. Высота изображения. Горизонтальный отступ от изображения до окружающего контента. Говорит браузеру, что картинка является серверной картой-изображением. Указывает адрес документа, где содержится аннотация к картинке. Адрес изображения низкого качества. Путь к графическому файлу. Вертикальный отступ от изображения до окружающего контента. Ширина изображения. Ссылка на тег , содержащий координаты для клиентской карты-изображения.

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

Не требуется.

HTML5 IE Cr Op Sa Fx

Тег IMG

Lorem ipsum dolor sit amet...

Вставляем картинку :

Описание и использование

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

Заметьте, что изображения технически не вставляются в страницу. На самом деле, изображения ссылаются на HTML страницы. Тег создает контейнер для изображения.

У тега два обязательных атрибута: src и alt.

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

В HTML тег не имеет закрывающего тега.

В XHTML тег должен быть правильно закрыт.

Атрибуты "align", "border", "hspace", и "vspace" элемента img устарели и не поддерживаются в XHTML 1.0 Strict.

Совет: Атрибут alt используется как альтернативный текст в случае отсутствия изображения, а не как текст при наведении мышки. Для показа текста при наведении мышки на изображение используйте атрибут title. Вот так: .

Обязательные атрибуты

Необязательные атрибуты

Атрибут Значение Описание
align left right top middle bottom Устарел. Используйте CSS
border пиксели Устарел. Используйте CSS
height пиксели % Определяет высоту изображения
hspace пиксели Устарел. Используйте CSS
ismap ismap Определяет изображение как карту изображение на стороне сервера. Очень редко используется.
longdesc URL Определяет путь к документу, который содержит длинное описание изображения
usemap #название_карты Определяет изображение как карту изображение на стороне сервера.
vspace пиксели Устарел. Используйте CSS
width пиксели % Определяет ширину изображения

Стандартные атрибуты

Атрибут Значение Описание
class имя_класса Определяет имя класса для элемента
dir rtl ltr Определяет направление текста для контента в элементе
id id Определяет уникальный id для элемента
lang код_языка Определяет код языка для контента в элементе
style определение_стиля Определяет инлайновый стиль для элемента
title текст Определяет дополнительную информацию об элементе
xml:lang код_языка Определяет код языка для контента в элементе, в XHTML документах

Событийные атрибуты

Атрибут Значение Описание
onabort скрипт Скрипт будет выполнен при проблеме с загрузкой изображения
onclick скрипт Скрипт будет выполнен при клике
ondblclick скрипт Скрипт будет выполнен при двойном клике
onmousedown скрипт Скрипт будет выполнен при нажатии кнопки мышки
onmousemove скрипт Скрипт будет выполнен при движении курсора мышки
onmouseout скрипт Скрипт будет выполнен, когда курсор мышки покинет пределы элемента
onmouseover скрипт Скрипт будет выполнен, когда курсор мышки находится над элементом
onmouseup скрипт Скрипт будет выполнен, когда кнопка мышки будет отпушена
onkeydown скрипт Скрипт будет выполнен при нажатии клавиши
onkeypress скрипт Скрипт будет выполнен при нажатии клавиши и последующего разжатия
onkeyup скрипт Скрипт будет выполнен при разжатии клавиши

Элемент (от англ. "image" ‒ «изображение») предназначен для вставки в HTML страницу изображений в графическом формате GIF, JPEG, SVG или PNG. Адрес файла с изображением задаётся через атрибут src .

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

Если используется внутри ссылки или задает карту-изображение, то вокруг самого изображения некоторые браузеры отображают рамку, которую можно стилизовать или убрать при помощи CSS.

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

Также, для ускорения загрузки веб-страниц рекомендуется устанавливать атрибуты width и height , элемента . Тогда браузер не будет ожидать полной загрузки изображения, он просто выделит под него место и будет загружать страницу дальше, а его подгрузит потом. К тому же, если одно изображение используется на странице несколько раз (значение атрибута src одинаковое), то браузер загружает его с сервера только один раз, а потом берет из кэш-памяти.

Примечание: Браузеры не всегда показывают изображение, указанное в этом элементе. Например, если браузер неграфический (включая используемые людьми с нарушениями зрения), или если браузер не может показать изображение, потому что файл испорчен. В таких случаях браузер может заменить изображение альтернативным текстом, определённым в атрибуте alt элемента.

Синтаксис

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

Не требуется.

Атрибуты

align Устарел Определяет, как рисунок будет выравниваться по краю и способ обтекания текстом. alt Обязательный Альтернативный текст для изображения. border Устарел Толщина рамки вокруг изображения. height Высота изображения HTML5 в пикселях CSS, HTML4 в пикселях или процентах. hspace Устарел Горизонтальный отступ от изображения до окружающего контента. ismap Говорит браузеру, что картинка является серверной картой-изображением. longdesc Устарел в HTML5 Указывает адрес документа, где содержится аннотация к картинке. sizes HTML5 Задаёт размеры изображения для разных макетов страницы. src Обязательный Путь к графическому файлу. srcset HTML5 Путь к графическим файлам с учётом размера изображения и устройств. vspace Устарел Вертикальный отступ от изображения до окружающего контента. width Ширина изображения HTML5 в пикселях CSS, HTML4 в пикселях или процентах. usemap Ссылка на элемент , содержащий координаты для клиентской карты-изображения.

Стилизация по умолчанию

Большинство браузеров отобразит элемент со следующими значениями CSS по умолчанию:

Img { display: inline-block; }

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

В HTML 5 была прекращена поддержка атрибутов align, border, hspace, vspace

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

Элемент .

Спецификации

Тег

Тег используется для вставки изображений в HTML-страницу. Он имеет два обязательных атрибута: src и alt . Изображения в интернете играют одну из ключевых ролей. Они активно применяются в оформлении сайтов, в ссылках (вставкой их в тег ), наглядно дополняют текстовую информацию и т.д. Если тег используется внутри ссылки или задает карту изображений, то вокруг самого изображения некоторые браузеры отображают рамку, которую можно убрать при помощи атрибута border .

Важным моментом при включении изображения в страницу является его размер (вес) в килобайтах, а точнее соотношение вес-качество. Естественно, чем меньше вес изображений - тем быстрее загрузится страница. В основном в сети используются графические форматы JPEG, GIF и PNG, которые вполне отвечают данным требованиям.

Также, для ускорения загрузки страниц рекомендуется устанавливать атрибуты width и height , тега . Тогда браузер не будет ожидать полной загрузки изображения, он просто выделит под него место и будет загружать страницу дальше, а его подгрузит потом. К тому же, если одно изображение используется на странице несколько раз (значение атрибута src одинаковое), то браузер загружает его с сервера только один раз, а потом берет из кэш-памяти.

Атрибуты

Личные атрибуты:

Тип тега

Назначение: изображения .

Модель тега: inline (встроенный, уровня строки).

Может содержать: данный элемент является пустым/Empty.

Открывающий тег: необходим. Закрывающий тег: запрещен.

Синтаксис

Пример HTML: применение тега IMG

seodon.ru - Применение тега IMG

А вы знаете, что такое знак

Результат.

Поддержка версиями HTML

Спецификация Статус
WHATWG HTML Living Standard (WHATWG) Живой стандарт
HTML 4.01 (W3C) Рекомендация
HTML5 (W3C) Рекомендация
HTML 5.1 (W3C)
Версия: HTML 4.01 HTML 5 XHTML 1.0 XHTML 1.1
Поддержка: Да Да Да Да

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

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera
Версия: 6.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Да Да Да Да Да


СХОЖИЕ СТАТЬИ