<map>

Что делает тег

Тег используется для создания карты изображения. Карта — это изображение с кликабельными областями, которые могут быть связаны, например, с другой веб-страницей или определённой частью той же самой страницы.

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

<map name="map_name">
  <area shape="rect" coords="x1,y1,x2,y2" href="url">
  <область shape="circle" coords="x,y,r" href="url">
  <область shape="poly" coords="x1,y1,x2,y2,...,xn,yn" href="url">
</map>

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

Тег является частью спецификации HTML Living Standard.

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

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

Примеры использования

Создание карты с кликабельными областями:

<img src="image.jpg" alt="Изображение" usemap="#map">
<map name="map">
  <area shape="rect" coords="0,0,50,50" href="https://www.htmlacademy.ru/">
  <area shape="circle" coords="100,100,50" href="https://www.google.com/">
  <area shape="poly" coords="150,150,200,200,250,150" href="https://www.facebook.com/">
</map>

Использование тега с SVG-изображениями:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="80" fill="#f00" />
  <a xlink:href="https://www.htmlacademy.ru/">
    <rect x="30" y="30" width="40" height="40" fill="#0f0" />
  </a>
</svg>
<map name="map">
  <area shape="rect" coords="10,10,90,90" href="https://www.htmlacademy.ru/" target="_blank">
</map>

Для чего использовать тег <map>

• Создать кликабельное изображение для каталога продукции.
• Связать различные части изображения с информацией или продуктами.
• Создать пользовательское навигационное меню.

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

name — задаёт имя карты.

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

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

Ограничения

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

Нюансы

• Если координаты двух или более областей перекрываются, кликабельной будет только первая область, указанная в теге <map>.
• Использование карт может привести к проблемам доступности для пользователей, использующих программы чтения с экрана.

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

Тег поддерживается всеми современными браузерами. Актуальная информация — на сaniuse.

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

Альтернативных тегов для тега <map> не существует.

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

Если вам нужно создать кликабельные области на изображении без <map>, можете использовать CSS или JavaScript для достижения того же эффекта.

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

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

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

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

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