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

コンテンツカテゴリ フローコンテンツ記述コンテンツ
許可されている内容 なし。これは空要素です。
タグの省略 開始タグは必須。終了タグを記述してはなりません。
許可されている親要素 記述コンテンツを受け入れるすべての要素。 <area> 要素は祖先が <map> でなければなりませんが、直接の親要素である必要はありません。
許可されている ARIA ロール なし
DOM インターフェイス HTMLAreaElement

属性

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

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 以降では circpolygonrectangleshape の有効な値としてサポートします。これらの値は (非標準) です。
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 のみ定義しています。

仕様書

仕様書 状態 備考
Referrer Policy
referrerpolicy attribute の定義
勧告候補 referrerpolicy 属性を追加。
HTML Living Standard
<area> の定義
現行の標準  
HTML5
<area> の定義
勧告  
HTML 4.01 Specification
<area> の定義
勧告  

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
accesskey
非推奨
Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
altChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
coordsChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
downloadChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
hrefChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
hreflangChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
name
非推奨
Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
mediaChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
nohref
非推奨
Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
referrerpolicyChrome 完全対応 51Edge 未対応 なしFirefox 完全対応 50IE 未対応 なしOpera 完全対応 38Safari 完全対応 11.1WebView Android 完全対応 51Chrome Android 完全対応 51Edge Mobile 未対応 なしFirefox Android 完全対応 50Opera Android 完全対応 38Safari iOS 未対応 なしSamsung Internet Android 完全対応 7.2
relChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
shapeChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
tabindex
非推奨
Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
targetChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
type
非推奨
Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。

ドキュメントのタグと貢献者

このページの貢献者: taka-sho, mfuji09, yyss
最終更新者: taka-sho,