Тег <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>. Однако, это может затруднить создание интерактивной карты изображения.

Актуальность

Тег <area> не устарел и может использоваться в веб-разработке.


Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<ul>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023