Основний вміст

  • <body>

HTML тег <area>

Тег AREA в HTML: опис, синтаксис, атрибути

Опис

Кожен елемент <area> визначає активні області зображення, які є посиланнями. Тег <area> задає форму області, її розміри, встановлює адресу документа, який слід зробити посиланням, і навіть ім'я вікна чи кадру, куди браузер завантажуватиме документ. Цей тег завжди знаходиться в контейнері <map>, який зв'язує координати областей із зображенням.

Декілька областей можуть перекривати один одного, зверху буде та, яка в коді HTML знаходиться вище.

Синтаксис

HTML 
<map>
  <area href="URL">
</map>
XHTML 
<map>
  <area href="URL" />
</map>

Атрибути

accesskey
Перехід до області за допомогою комбінації клавіш.
alt
Альтернативний текст для області зображення.
coords
Координати активної області.
href
Задає адресу документа, на який слід перейти.
hreflang
Вказує мову документа, на яку веде посилання.
nohref
Область без посилання на інший документ.
shape
Форма області.
tabindex
Задає послідовність переходу між елементами за допомогою клавіші Tab.
target
Ім'я вікна або кадру, куди браузер завантажуватиме документ.
type
Встановлює MIME-тип документа, на який ведеться посилання.

Також для цього тега доступні універсальні атрибути та події.

Закриваючий тег

Не потрібно.

Приклад

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег AREA</title>
 </head>
 <body> 
 <div><img src="images/ecctitle.png" width="640" height="158" alt="Детский образовательный центр"><br>
  <img src="images/navigate.png" width="640" height="30" alt="Навигация по сайту" usemap="#Navigation"></div>
  <p><map name="Navigation">
  <area shape="poly" coords="113,24,211,24,233,0,137,0" href="inform.html" alt="Информация">
  <area shape="poly" coords="210,24,233,0,329,0,307,24" href="activity.html" alt="Мероприятия">
  <area shape="poly" coords="304,24,385,24,407,0,329,0" href="depart.html" alt="Отделения">
  <area shape="poly" coords="384,24,449,24,473,0,406,0" href="techinfo.html" alt="Техническая информация">
  <area shape="poly" coords="449,24,501,24,525,0,473,0" href="study.html" alt="Обучение">
  <area shape="poly" coords="501,24,560,24,583,0,525,0" href="work.html" alt="Работа">
  <area shape="poly" coords="560,24,615,24,639,0,585,0" href="misk.html" alt="Разное">
  </map></p>
 </body>
</html>

Часті запитання

  • Q: Як працює тег <area> в HTML?

    A: Тег <area> вказує область у межах зображення, що становить гіперпосилання.

  • Q: Які атрибути можна використовувати з тегом <area>?

    A: Деякі з найпоширеніших атрибутів включають shape, coords, href, alt, target тощо.

  • Q: Які форми можуть мати тег <area>?

    A: Тег <area> може мати форми, такі як rect (прямокутник), circle (коло) або poly (багатокутник).

  • Q: Для чого використовується атрибут shape з тегом <area>?

    A: Атрибут shape визначає форму області, яка пов'язана з гіперпосиланням.

  • Q: Як використовувати тег <area> для визначення області гіперпосилання на зображенні?

    A: Для цього потрібно визначити тег <map> навколо зображення та використовувати тег <area> всередині тегу <map> з необхідними атрибутами.