<area>要素

<area>要素の定義

英語で「領域」を表す、”area”より。
HTML文書では、画像内のホットスポット領域（＝クリック可能な領域）を定義し、任意でその領域とハイパーリンクを関連付ける際に使われます。
なお、この要素は <map> 要素内だけで動作します。

子要素として使用できるもの

空要素なので子要素は使用できません。

親要素として使えるもの

記述コンテンツ。祖先要素が <map> 要素である必要はありますが、直接の親要素である必要はありません。

許可されているARIAロール

なし

DOMインターフェース

HTMLAreaElement

属性

グローバル属性が指定できます。

alt

画像を表示しないブラウザーの場合に、代わりに表示する文字列を指定します。

coords

ホットスポット領域の座標を指定する値のセットを記述します。指定する値の数は、shape属性で指定した領域の形状に依存します。

• rect の場合：左上角のx座標、左上角のy座標、右下角のx座標、右下角のy座標の順に指定します。
• circle の場合：円の中心のx座標、円の中心のy座標、半径の値の順に指定します。
• poly の場合：多角形の各頂点のx座標、y座標を列挙します。（x₁,y₁,x₂,y₂,x₃,y₃ …となります）

download

この属性がある場合は、ハイパーリンクをリソースのダウンロードに使用することを表します。

href

その領域が示す、ハイパーリンクの宛先です。

hreflang

リンク先のリソースの言語を表します。

ping

ハイパーリンクがフォローされたときに、ブラウザーから本文を PING とした POST リクエストの送信先URLを指定します。複数ある場合は、空白で区切ります。

rel

href属性を指定した場合、リンク元とリンク先の関連を指定します。
属性値は、空白で区切られたリンク種別の値のリストです。
リンク種別の詳細はこちら

shape

ホットスポット領域の形状を指定します。

• rect ： 領域が長方形であることを示します。”rectangle”より。
• circle ： 領域が円形であることを示します。coords属性に指定できるのが、中心の座標と半径のみなので、楕円形ではなく、正円形となります。
• poly ： 領域が多角形であることを示します。”polygon”より。
• default ： 定義済みの領域以外のすべての領域を示します。

target

リンク先の URL を表示する場所を指定します。これは、閲覧コンテキスト（タブ、ウィンドウ、<iframe> ）の名前またはキーワードです。以下のキーワードは特別な意味を持ちます。
閲覧コンテキストの詳細はこちら

サンプル

See the Pen クリッカブルマップ by Masahiko Iwakiri (@m-iwakiri) on CodePen.