クリック可能な領域を持つイメージマップ：
<img src="planets.gif"
width="145" height="126"
alt="Planets"
usemap="#planetmap">
<map
name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
Try it Yourself ❯
<area> タグは、イメージマップ内の領域を定義します（イメージマップはクリック可能な領域を持つイメージのことです）。
<area> 要素は、常に <map> タグ内にネストします。
注: <img> タグの usemap 属性は、<map> 要素の name 属性に紐付けられ、画像とマップとの間の関係を作成します。
| 要素 | |||||
|---|---|---|---|---|---|
| <area> | Yes | Yes | Yes | Yes | Yes |
HTML5 には、いくつかの新しい属性があります。また、一部の HTML 4.01 の属性はサポートされなくなっています。
HTML では、<area> タグに終了タグがありません。
XHTML では、<area> タグを適切に閉じなければなりません。
= HTML5 で新規追加。
| 属性 | 値 | 説明 |
|---|---|---|
| alt | text | area の代替テキストを指定する。href 属性が存在する場合は必須 |
| coords | coordinates | area の座標を指定する |
| download | filename | ユーザがハイパーリンクをクリックしたときに、ダウンロードするターゲットを指定する |
| href | URL | area のハイパーリンクターゲットを指定する |
| hreflang | language_code | ターゲット URL の言語を指定する |
| media | media query | ターゲット URL がどのメディア/デバイスに最適化されているかを指定する |
| nohref | value | HTML5 ではサポート対象外。 area には関連するリンクがないことを指定する |
| rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag |
現在の文書とターゲット URL の間の関係を指定する |
| shape |
default rect circle poly |
area の形状を指定する |
| target | _blank _parent _self _top framename |
ターゲット URL をどこへ開くかを指定する |
| type | media_type | ターゲット URL のメディア・タイプを指定する |
<area> タグは、HTML のグローバル属性もサポートします。
<area> タグは、HTML のイベント属性もサポートします。
HTML DOM リファレンス： Area オブジェクト
ほとんどのブラウザは、次のデフォルト値を使用して <area> 要素を表示しています：
area {
display:
none;
}