Главная » Справочник » Справочник по HTML » Справочник по тегам HTML элементов » Тег area HTML

Тег area HTML

HTML - тег <area> идентифицирует активные области (координаты, форму, размер и т. д.) изображения-карты, определяемые тегом <map>. При нажатии на активную область изображения происходит определенное действие, например, переход на страницу с подробной информацией.

Тег <area> - синтаксис и код

<area> — пустой тег, что означает, что закрывающий тег не требуется. Но в XHTML тег (<area>) должен быть закрыт (<area/>).

Нажмите на компьютер, телефон или чашку кофе, чтобы перейти на новую страницу и прочитать больше по теме:

★ Примечание: если вы просматриваете эту страницу на мобильном устройстве, переверните устройство в альбомную ориентацию, для просмотра примеров.

Карта изображения с кликабельными областями:

<img src="/htm/workplace.png" alt="Workplace" usemap="#workmap">

<map name="workmap">
<area shape="rect" coords="33,10,250,247" alt="Ноутбук" href="/htm/notebook.htm">
<area shape="rect" coords="288,90,322,138" alt="Смартфон" href="/htm/smartphone.htm">
<area shape="circle" coords="336,188,37" alt="Кофе" href="/htm/coffee.htm">
</map>

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

HTML - тег <area> определяет область внутри карты изображения (карта изображения — это изображение с интерактивными областями);
Элементы <area> всегда вложены внутри тега <map>.

★ Примечание: атрибут usemap в <img> связан с атрибутом имени элемента <map> и создает связь между изображением и картой.

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

	✅ Поддерживает
	✅ Поддерживает
	✅ Поддерживает
	✅ Поддерживает
	✅ Поддерживает

Атрибуты

Атрибут	Значение	Описание
alt	text	Задает альтернативный текст для области. Требуется, если присутствует атрибут href
coords	coordinates	Указывает координаты области
download	filename	Указывает, что целевой объект будет загружен, когда пользователь нажмет на гиперссылку
href	URL	Указывает цель гиперссылки для области
hreflang	language_code	Указывает язык целевого URL-адреса
media	media query	Указывает, для какого носителя/устройства оптимизирован целевой URL-адрес
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url	Указывает, какую информацию о реферере отправлять вместе со ссылкой
rel	alternate author bookmark help license next nofollow noreferrer prefetch prev search tag	Указывает связь между текущим документом и целевым URL-адресом
shape	default rect circle poly	Определяет форму области
target	_blank _parent _self _top framename	Указывает, где открыть целевой URL-адрес
type	media_type	Указывает тип носителя целевого URL-адреса

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

Тег <area> также поддерживает глобальные атрибуты в HTML

Атрибуты событий

Тег <area> также поддерживает атрибуты событий в HTML

Связанные страницы

Руководство по HTML: карты изображений в HTML

Настройки CSS по умолчанию

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

area {
  display: none;
}

Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.

Поделиться ссылкой