HTML тег <area>

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

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

Координаты задаются в CSS-пикселях от левого верхнего угла изображения и не масштабируются пропорционально при изменении его размера. Для shape="default" координаты не задают. Дайте каждой области-ссылке осмысленный alt и проверьте переход по областям клавишей Tab.

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

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (9) поддерживаются не везде — смотрите таблицу.

Показать браузеры
Совместимостьhtml.elements.area
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
area✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
alt✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
attributionsrc✓125✓125×✓111×✓125×✓83×✓27.0✓125×
coords✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
download✓54✓12✓20✓41✓10.1✓54✓20✓41✓10.3✓6.0✓54✓10.3
href✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
hreflang××✓153×××✓153×××××
target="_blank" implies rel="noopener" behavior✓88✓88✓79✓74✓12.1✓88✓79✓63✓12.2✓15.0×✓12.2
interestfor✓142✓142×✓126×✓142×✓93×✓30.0✓142×
nohref✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
ping✓12✓17◐1

Версия 1 выпущена в 2004 г. — Частичная поддержка

Примечание MDN (англ.)

This property is exposed but has no effect if the browser.send_pings preference is not set to true. See bug 951104.

✓15✓6✓18◐4

Версия 4 выпущена в 2011 г. — Частичная поддержка

Примечание MDN (англ.)

This property is exposed but has no effect if the browser.send_pings preference is not set to true. See bug 951104.

✓14✓6✓1.0✓4.4✓6
referrerpolicy✓51✓79✓50✓38✓14✓51✓50✓41✓14✓7.2✓51✓14
no-referrer-when-downgrade✓51✓79×

Версия 50 выпущена в 2016 г. — Удалено в 92

✓38×✓51×

Версия 50 выпущена в 2016 г. — Удалено в 92

✓41×✓7.2✓51×
origin-when-cross-origin✓51✓79×

Версия 50 выпущена в 2016 г. — Удалено в 92

✓38×✓51×

Версия 50 выпущена в 2016 г. — Удалено в 92

✓41×✓7.2✓51×
unsafe-url✓51✓79×

Версия 50 выпущена в 2016 г. — Удалено в 92

✓38×✓51×

Версия 50 выпущена в 2016 г. — Удалено в 92

✓41×✓7.2✓51×
rel✓16✓12✓30✓15✓5✓18✓30✓14✓4.2✓1.0✓4.4✓4.2
noopener✓49✓79✓52

Версия 52 выпущена в 2017 г.

Примечание MDN (англ.)

Before Firefox 63, rel="noopener" created windows with all features disabled by default. Starting with Firefox 63, these windows have the same features enabled by default as any other window.

✓36✓10.1✓49✓52

Версия 52 выпущена в 2017 г.

Примечание MDN (англ.)

Before Firefox for Android 63, rel="noopener" created windows with all features disabled by default. Starting with Firefox for Android 63, these windows have the same features enabled by default as any other window.

✓36✓10.3✓5.0✓49✓10.3
noreferrer✓16✓13✓33✓15✓5✓18✓33✓14✓4.2✓1.5✓4.4✓4.2
shape✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
target✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
type××✓153×××✓153×××××

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Атрибуты

Атрибут Значение Описание
alt text Указывает альтернативный текст для области. Если атрибут href присутствует, то является обязательным!.
coords coordinates Указывает координаты области.
download filename Просит скачать ресурс; имя файла — рекомендация. Обычно действует для того же источника, blob: и data:, а ответ сервера влияет на результат.
href URL Определяет гиперссылку на площади.
hreflang language_code Определяет язык целевой URL.
media media query Исторический атрибут, не предусмотренный современным HTML для <area>.
nohref value Не поддерживается в HTML5.
Указывает, что для данной области ссылка не задана.
rel alternate | author | bookmark | external | help | license | next | nofollow | noopener | noreferrer | opener | prev | search | tag Отношения к целевому документу; токены записываются через пробел. Например, noopener изолирует окно, noreferrer также запрещает передачу Referer. Список значений здесь не исчерпывающий.
shape default
rect
circle
poly 		Указывает форму области.
target _blank
_parent
_self
_top
framename 		Определяет, где открыть целевой URL.
type media_type Атрибут определяет MIME-тип целевого URL.
ping URL через пробел Адреса уведомлений о переходе по ссылке. Браузер может отключать такие запросы.
referrerpolicy Политика Referer Определяет, какую информацию об адресе исходной страницы передавать при переходе.

Атрибутами тега <area> мы указываем как координаты области (атрибут coords), так и тип необходимой нам фигуры (атрибут shape):

Значение атрибута Определение
default Весь регион.
rect Прямоугольная область (x1,y1,x2,y2).
circle Круглая область (x,y,r- радиус).
poly Многоугольную область (x1,y1,x2,y2,...,xn,yn).

Круг: x, y, r Прямоугольник Многоугольник x y r x1 x2 y1 y2 x1 x2 x3 y1 y2 y3 circle rect poly
Создание активной области с использованием системы координат.

Примеры, попробуйте сами

Карта изображения

Измените координаты областей. Для переходов скачайте HTML. На узком экране изображение прокручивается, чтобы сохранить исходные координаты.

base.css
CSS
/* Сохраняем координаты карты: широкое изображение прокручивается без масштабирования. */
.map-stage {
    overflow: auto;
}
index.html
HTML
<div class="map-stage">
  <img src="assets/map.png" width="520" height="150" usemap="#shapes" alt="Квадрат, круг, треугольник и звезда" />
</div>
<map name="shapes"
  ><area shape="rect" coords="25,25,125,125" href="#square" alt="Квадрат" /><area
    shape="circle"
    coords="200,75,50"
    href="#circle"
    alt="Круг"
/></map>
<p id="square">Раздел о квадрате.</p>
<p id="circle">Раздел о круге.</p>

Карта с переходами на отдельные страницы

У прямоугольника, круга и двух многоугольников разные coords и адреса href. Нажмите на каждую фигуру и вернитесь стрелкой «Назад» над результатом. Перейдите к областям клавишей Tab и активируйте ссылку клавишей Enter. Измените радиус круга с 50 на 25: активная область уменьшится, само изображение не изменится.

blue.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Голубой треугольник</title>
  </head>
  <body>
    <h1>Голубой треугольник</h1>
    <p><a href="index.html">Вернуться к фигурам</a></p>
  </body>
</html>
green.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Зелёный круг</title>
  </head>
  <body>
    <h1>Зелёный круг</h1>
    <p><a href="index.html">Вернуться к фигурам</a></p>
  </body>
</html>
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Изображение-карта</title>
  </head>
  <body>
    <p>Выбери фигуру:</p>
    <img src="assets/map.png" usemap="#figuri" alt="Четыре фигуры: квадрат, круг, треугольник и звезда" width="520" height="150">
    <map name="figuri">
      <area shape="rect" coords="25,25,125,125" href="red.html" alt="Красный квадрат">
      <area shape="circle" coords="200,75,50" href="green.html" alt="Зелёный круг">
      <area shape="poly" coords="325,25,262,125,388,125" href="blue.html" alt="Голубой треугольник">
      <area shape="poly" coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href="yellow.html" alt="Жёлтая звезда">
    </map>
  </body>
</html>
red.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Красный квадрат</title>
  </head>
  <body>
    <h1>Красный квадрат</h1>
    <p><a href="index.html">Вернуться к фигурам</a></p>
  </body>
</html>
yellow.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Жёлтая звезда</title>
  </head>
  <body>
    <h1>Жёлтая звезда</h1>
    <p><a href="index.html">Вернуться к фигурам</a></p>
  </body>
</html>

Отличия HTML 4.01 от HTML 5

В HTML5, добавлено 5 новых атрибутов, атрибут nohref был удалён.

Значение CSS по умолчанию

CSS
area {
display: none;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

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

Элемент поддерживает "атрибуты событий".