Тег <area> в HTML: что это такое?

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

<map name="mapname">
  <area shape="rect" coords="34,44,270,350" href="link1.html" alt="Описание области 1">
  <area shape="circle" coords="337,300,44" href="link2.html" alt="Описание области 2">
</map>

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

• alt: позволяет указать альтернативный текст для области.
• coords: позволяет указать координаты области в зависимости от формы.
• download: указывает, что при клике на область, будет загружен файл.
• href: URL, на который ведет область.
• hreflang: язык целевого ресурса.
• media: позволяет указать, для какого устройства будет доступен ресурс.
• name: позволяет указать имя области.
• nohref: позволяет указать, что область не является ссылкой.
• referrerpolicy - говорит браузеру, какую информацию о реферере (странице, с которой пришел пользователь) отправить при переходе по ссылке. Это может быть полезно для защиты конфиденциальности пользователей и повышения безопасности веб-приложений.
• rel - предоставляет возможность указать различные отношения между текущим документом и целевым. Правильное использование значений этого атрибута может улучшить SEO, пользовательский опыт и защитить веб-приложения от потенциальных уязвимостей.
• shape: определяет форму области (rect, circle, poly, default).
• tabindex: где открывать ссылку.
• target - говорит браузеру, как открыть ссылку. Например, в текущей вкладке или новой.
• type - подсказка о MIME-тип целевого ресурса - типе контента, на который ведет ссылка. Например, изображение или аудио.

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

Примеры использования тега <area>

Примеры использования атрибутов shape и coords тега area в HTML

• rect: создает прямоугольную область. Координаты задаются в формате "x1,y1,x2,y2", где (x1,y1) - координаты верхнего левого угла, а (x2,y2) - нижнего правого.

  <area shape="rect" coords="34,44,270,350" href="/page" alt="Прямоугольная область" />

• circle: создает круглую область. Координаты задаются в формате "x,y,r", где (x,y) - координаты центра круга, а r - радиус.

  <area shape="circle" coords="337,300,44" href="/path" alt="Круглая область" />

• poly: создает многоугольную область. Координаты задаются последовательностью пар x,y для каждой точки многоугольника.

  <area shape="poly" coords="100,100,150,50,200,100,150,150" href="/path" alt="Многоугольная область" />

• default: определяет всю область изображения как активную.

  <area shape="default" href="/path" alt="Вся область изображения" />

Комплексный пример использования атрибутов тега area

<img src="map.jpg" alt="Карта" usemap="#map">

<map name="map">
  <!-- Прямоугольная область с загрузкой файла -->
  <area
    shape="rect"
    coords="50,50,200,120"
    href="plan.pdf"
    alt="План"
    download="plan.pdf"
    type="application/pdf"
  />

  <!-- Круглая область с внешней ссылкой -->
  <area
    shape="circle"
    coords="300,200,50"
    href="https://maps.google.com"
    alt="Расположение на карте"
    target="_blank"
    rel="noopener noreferrer"
    referrerpolicy="no-referrer"
  />

  <!-- Многоугольная область с отправкой email -->
  <area
    shape="poly"
    coords="400,150,450,180,400,210,350,180"
    href="mailto:info@example.com"
    alt="Написать письмо"
  />
</map>

Более детальные примеры использования некоторых атрибутов можно найти по следующей ссылке: Примеры использования тега <a>.

Советы по использованию тега area

• Группируйте связанные области внутри одного тега map.
• Закрывающий тег </area> запрещен.
• Всегда указывайте атрибут alt для улучшения доступности.
• Проверяйте корректность координат на разных размерах экрана.
• Используйте инструменты для создания координат областей вместо ручного расчета.
• Добавляйте атрибуты rel="noopener noreferrer" для внешних ссылок.
• Тестируйте работу областей на различных устройствах и браузерах.
• Учитывайте отзывчивость изображения при определении координат.

Часто задаваемые вопросы (FAQ)

1 Как работает тег area?

Тег area определяет активные области на изображении, которые могут быть связаны с различными URL. Он должен использоваться внутри тега map.

2 Можно ли использовать тег area без тега map?

Нет, тег area всегда должен использоваться внутри тега map для правильной работы.

Заключение

Тег area является мощным инструментом для создания интерактивных изображений в HTML. Правильное использование этого тега в сочетании с map позволяет создавать удобные навигационные системы и интерактивные карты. При этом важно помнить о доступности, указывая альтернативный текст и правильно настраивая координаты областей.

Для получения дополнительной информации о теге area, рекомендуем ознакомиться с официальной документацией на сайте MDN.