HTML-тег <area>
Тег <area> определяет активные области (координаты, форму, размер и т. д.) карты изображения, заданной тегом <map>. При нажатии на активную область изображения выполняется определенное действие, например, переход на страницу с подробной информацией.
Тег <area> всегда размещается внутри тега <map>. Активные области могут перекрываться, в этом случае при нажатии активируется область, которая идет позже в порядке DOM.
Синтаксис
Тег <area> является пустым, то есть закрывающий тег не требуется. Однако в XHTML тег <area> должен быть закрыт (<area />).
Пример использования HTML-тега <area>:
HTML-тег <area>
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Click on the logo or on one of the logo item to watch it closer:</p>
<img src="https://ru.w3docs.com/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" width="250" height="150" alt="block" usemap="#blockmap" />
<map name="blockmap">
<area shape="circle" coords="50,32,25" alt="html" href="https://ru.w3docs.com/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png" />
<area shape="circle" coords="218,115,25" alt="css" href="https://ru.w3docs.com/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png" />
<area shape="circle" coords="195,32,28" alt="php" href="https://ru.w3docs.com/uploads/media/book_gallery/0001/01/4bbee6698c4884f25c46010d61b658dd62d2c04f.png" />
<area class="homepage" shape="rect" coords="35,55,90,90" alt="php" href="https://www.w3docs.com/" />
</map>
</body>
</html>Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| alt | текст | Задает альтернативный текст для активной области. |
| coords | x1,y1,x2,y2 | x,y,radius | x1,y1,...,xn,yn | Задает координаты активной области. Значения зависят от формы: rect (верхний левый и нижний правый углы), circle (центр и радиус) или poly (вершины полигона). |
| download | имя_файла | Указывает, что при нажатии на определенную область файл должен быть загружен. |
| href | URL | Задает ссылку для перехода. |
| hreflang | код_языка | Определяет язык ссылочного документа. Используется только с href. |
| nohref | (нет) | Задает область, не содержащую ссылки. Не поддерживается в HTML5. |
| rel | alternate | author | bookmark | help | license | next | nofollow | noreferrer | prefetch | prev | search | tag | Устанавливает связь между текущим и ссылочным документами. |
| shape | rect | circle | poly | Определяет форму области. |
| target | _blank | _self | _top | _parent | frame_name | Задает, как должен открываться ссылочный документ. frame_name не поддерживается в HTML5. |
| type | media_type | Задает MIME-тип ссылочного документа. |
Тег <area> также поддерживает Глобальные атрибуты и Атрибуты событий.
Практика
Каково назначение тега HTML area и какие у него атрибуты?