<area>

HTML の <area> 要素は画像のホットスポット領域を定義し、また任意で領域とハイパーテキストリンクの関連づけを行います。この要素は <map> 要素内だけで使用します。

この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

属性

この要素はグローバル属性を持ちます。

accesskey HTML 4 のみ、Gecko 5.0 で廃止

要素のキーボードナビゲーションアクセラレーターを指定します。 ALT または同様のキーと指定した文字のキーを併せて押下すると、キーシーケンスに関係があるホットスポットを選択します。ページデザイナーは、すでにブラウザーに割り当てられているキーシーケンスを避けるよう注意しなければなりません。この属性は HTML5 からグローバル属性になりました。

alt

画像を表示しないブラウザーが代わりに表示するテキスト文字列です。テキストの内容は、代替テキストを表示しない場合に画像が提供する選択肢と同じものをユーザーに与えるような表現にすべきです。 HTML4 では、この属性は必須ですが空文字列 ("") でもかまいません。 HTML5 では、この属性は href 属性を使用する場合にのみ必須です。

coords

ホットスポット領域の座標を指定する値のセットです。値の数と意味は shape 属性で指定した値に依存します。

• rect すなわち長方形の場合は、 coords の値は2つの x,y の組で、左、上、右、下を表します。
• circle すなわち円の場合は、 x,y,r であり、 x,y は円の中心を指定する組、r は半径の値です。
• poly すなわち多角形の場合は、多角形の各頂点の x,y の組のセットです。 x1,y1,x2,y2,x3,y3, などのようになります。

HTML4 での値はピクセル数、またはパーセント記号 (%) を付加した場合はパーセント値です。 HTML5 での値は CSS ピクセル数です。

download HTML5

この属性がある場合は、作者はハイパーリンクをリソースのダウンロードに使用すると考えていることを示します。download 属性の詳しい説明は <a> をご覧ください。

href

この領域のハイパーリンクの宛先です。この値は有効な URL です。HTML4 では、この属性か nohref 属性を与えなければなりません。HTML5 では、この属性を省略できます。省略した場合、 area 要素はハイパーリンクを提供しません。

hreflang HTML5

リンク先のリソースの言語を示します。許容される値は BCP47 で定めています。この属性は、href 属性を与える場合にのみ使用してください。

name HTML 4 のみ、Gecko 5.0 で廃止

古いブラウザーでスクリプトから使用できるようにするため、クリッカブル領域に名前を定義します。

nohref HTML 4 のみ、Gecko 5.0 で廃止

関連づけた領域はハイパーリンクがないことを示します。この属性か href 属性を指定しなければなりません。

使用上の注意: この属性は HTML5 で廃止されており、代わりに href 属性を省略すれば十分です。

ping

ハイパーリンクがフォローされたときに、ブラウザーから (バックグラウンドで) 本文を PING とした POST リクエストが送信される URL を空白で区切ったリストを含めます。ふつうは追跡用に使用します。

referrerpolicy

リソースを読み込む際にどのリファラーを使用するかを示す文字列です:

• "no-referrer" は、Referer: ヘッダーを送信しないことを表します。
• "no-referrer-when-downgrade" は、TLS (HTTPS) を使用せずに生成元へナビゲートする場合は Referer: ヘッダーを送信しないことを表します。これは他にポリシーが定められていない場合の、ユーザーエージェントの既定の動作です。
• "origin" は、ページの生成元 (大まかにいえばスキーム、ホスト、ポート) をリファラーとすることを表します。
• "origin-when-cross-origin" は、異なる生成元へのナビゲートではリファラーをスキーム、ホスト、ポートに制限します。同一生成元へのナビゲートでは、リファラーのパスも含めます。
• "unsafe-url" は、リファラーに生成元とパスを含めることを表します (ただし、フラグメント、パスワード、ユーザー名は含めません)。これは生成元やパスの情報が TLS で保護されたリソースからセキュアでない生成元へ漏えいしますので、安全ではありません。

rel HTML5

href 属性を含むアンカーで、この属性は、対象オブジェクトとリンクオブジェクトの関係を指定します。属性値は、空白で区切られたリンク種別の値のリストです。値とそれらの意味は、ドキュメントの作者に意味づけを示す何らかの権威により登録されます。値が与えられない場合の既定の関係は、空 (void) です。この属性は、href 属性を与える場合にのみ使用してください。

shape

関連づけたホットスポットの形状です。HTML5 および HTML4 の仕様では長方形の領域を定義する値 rect、円形の領域を定義する値 circle、多角形を定義する値 poly、定義済みの領域以外すべての領域を示す値 default を定めています。多くのブラウザー、特に Internet Explorer 4 以降では circ、polygon、rectangle を shape の有効な値としてサポートします。これらの値は (非標準) です。

tabindex HTML 4 のみ、Gecko 5.0 で廃止

ブラウザーのタブオーダーにおける、定義した領域の位置を示す数値です。この属性は HTML5 のグローバル属性です。

target

この属性は、リンク先のリソースをどこに表示するかを指定します。これは、HTML4 ではフレームの名前またはキーワードでした。HTML5 では、閲覧コンテキスト の名前またはキーワードです (例えば、タブ、ウィンドウ、インラインフレームなど)。以下のキーワードは特別な意味を持ちます:

• _self: レスポンスを現在のものと同じ HTML4 フレーム (または HTML5 の閲覧コンテキスト) に読み込みます。この値は、属性が指定されていない場合の既定値です。
• _blank: レスポンスを新しい名前の付けられていない HTML4 ウィンドウまたは HTML5 の閲覧コンテキストに読み込みます。
• _parent: レスポンスを現在のフレームの HTML4 フレームセットの親要素または HTML5 の現在の親閲覧コンテキストに読み込みます。親要素がない場合、このオプションは _self と同じ振る舞いをします。
• _top: HTML4 では、レスポンスをすべて元のウィンドウに読み込み、他のフレームをすべてキャンセルします。 HTML5 では、レスポンスを最上位の閲覧コンテキストに読み込みます (現在の閲覧コンテキストの祖先にあたり、それ以上親のない要素です)。親要素がない場合、このオプションは _self と同じ振る舞いをします。

この属性は、href 属性を与える場合にのみ使用してください。

type Gecko 5.1 で廃止

この属性は使用しないでください。ブラウザーは無視します (HTML 仕様書の W3C 5.3 では有効なものとして定義していますが、正規の HTML 仕様書では定義していておらず、どのユーザーエージェントでも効果がありません。)

例

<map name="primary">
  <area shape="circle" coords="75,75,75" href="left.html" alt="Click to go Left">
  <area shape="circle" coords="275,75,75" href="right.html" alt="Click to go Right">
</map>
<img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 pic">

結果

メモ

HTML 3.2、4.0、5 の仕様では、終了タグ </area> を禁止しています。

XHTML 1.0 仕様では、 <area /> のように末尾のスラッシュが必要です。

id 属性、 class 属性、 style 属性は HTML4 仕様で定義しているコア属性と同じ意味を持ちますが、 Netscape と Microsoft だけがこれらを定義しています。

Netscape 1 レベルのブラウザーはフレームに関連する target 属性を回避できません。

HTML 3.2 では alt, coords, href, nohref, shape のみ定義しています。

仕様書

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。