<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>
. Однако, это может затруднить создание интерактивной карты изображения.
Актуальность
Тег <area>
не устарел и может использоваться в веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Глобальные атрибуты HTML
Список основных атрибутов, которые подойдут ко всему.
- 29 марта 2023
Как добавить раздел на страницу. Тег <div>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Список описаний. Тег <dl>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Пункт выпадающего списка. Тег <option>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023