<area>

25 января 2023

Тег <area> определяет область, которая является частью изображения-карты, и связанную с ней гиперссылку. Область может быть прямоугольной, круглой или многоугольной формы.

Синтаксис тега <area>

<map name="mapname">
  <area shape="rect" coords="x1,y1,x2,y2" href="url">
  <area shape="circle" coords="x,y,r" href="url">
  <area shape="poly" coords="x1,y1,x2,y2,x3,y3,..." href="url">
</map>

name — имя карты изображения, которому соответствует область.
shape — форма области. Может быть rect (прямоугольник), circle (круг) или poly (многоугольник).
coords — координаты области. Зависят от значения shape. Для прямоугольника указываются координаты левого верхнего угла и правого нижнего угла (x1,y1,x2,y2). Для круга указывается координаты центра и радиус (x,y,r). Для многоугольника указываются координаты всех точек (x1,y1,x2,y2,x3,y3,...).
href — адрес, на который будет переходить пользователь при клике на область.

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

Тег <area> актуален в HTML5 и является частью спецификации.

Семантический или нет

Тег <area> не является семантическим, так как не придает никакого конкретного значения содержимому.

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

alt — описание области для пользователей, которые не могут визуально увидеть карту изображения. Также используется в качестве замены для изображения, если оно не загружено.
coords — координаты области. Зависят от значения shape. Для прямоугольника указываются координаты левого верхнего угла и правого нижнего угла (x1,y1,x2,y2). Для круга указывается координаты центра и радиус (x,y,r). Для многоугольника указываются координаты всех точек (x1,y1,x2,y2,x3,y3,...).
download — предлагает скачать по ссылке целевой ресурс, указанный в href, вместо его отображения в браузере.
href — адрес, на который будет переходить пользователь при клике на область.
hreflang — язык, на котором написана целевая страница.
media — условия, которые должны быть выполнены для применения стиля к целевой странице.
referrerpolicy — политика отправки referrer при переходе по ссылке. Это влияет на то, как информация о странице-источнике передается на страницу-назначение.
rel — определяет отношение между текущей страницей и целевой страницей.
shape — форма области. Может быть rect (прямоугольник), circle (круг) или poly (многоугольник).
target — указывает, как будет открыта целевая страница. Значения: _self (в текущем окне), _blank (в новом окне), _parent (в родительском фрейме) или _top (во всем окне браузера).

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

Тег поддерживает все глобальные атрибуты HTML.

Ограничения тега <area>

Тег <area> не может использоваться самостоятельно и должен всегда находиться внутри контейнера <map](/blog/html-tags/map).

Нюансы

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

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

Тег <area>поддерживается всеми современными браузерами.

Альтернативные теги

Нет альтернативных тегов для <area>, так как он используется только внутри тега <map>.

Чем заменить этот тег

Тег <area> используется для создания карт изображений и задания ссылок на отдельные области изображения, поэтому заменить его можно только использованием других тегов, например, <a> или <div>. Однако, это может затруднить создание интерактивной карты изображения.