目次に戻る

area要素:HTML Living Standard各要素別メモ

概要

カテゴリー
配置できる場所

W3C : HTML5.3祖先map要素又はtemplate要素がなければならないとされていた(template要素内容は、原則として準拠性のチェックを受けないので、template要素への言及は実質的には無意味だったが)。

内容モデル
属性
  • グローバル属性
  • hrefリンク先のURL
  • altハイパーリンクを示すテキストhref属性がある場合は必須で、その属性値にするのは原則禁止(イメージマップが機能しない場合の代替テキストたるリンクテキストとなるため)。href属性がない場合は省略しなければならない。
  • download→指定された場合は、リンク先がダウンロードされるべきファイルであることを示す。属性値を指定した場合は、それはダウンロードされるファイルデフォルトファイル名になる。対応ブラウザでは、リンククリックしたときにダウンロードダイアログボックスが開くなどの反応をすることが期待されるかもしれない。
  • pingピンの送信先のURL。半角スペース区切りで複数指定可。
  • referrerpolicy→値は下記のとおり。アクセス又はリソース読み込みのときのリファラーヘッダに関するポリシーを指定する。詳細は、Referrer Policyを参照。
    • no-referrerリファラーヘッダを削除し、リファラー情報を送信しない。
    • no-referrer-when-downgradeTLSで保護されたクライアントから信用に値し得ないURLへの送信の際は、リファラーヘッダを削除し、リファラー情報を送信しない。その他の場合は、リファラー情報を全部送信する。
    • same-origin→非同一オリジンからの要請に対しては、リファラーヘッダを削除し、リファラー情報を送信しない。同一オリジンからの要請に対しては、リファラー用に削った全部情報を送信する。
    • originドメイン部分のみをリファラー情報として送信する(例:「https://example.com/example.html」からのアクセス→「https://example.com/」のみを送信)。
    • strict-originTLSで保護されたクライアントから信用に値し得ないURLへの送信の際は、リファラーヘッダを削除し、リファラー情報を送信しない。その他の場合は、ドメイン部分のみをリファラー情報として送信する。
    • origin-when-cross-origin→非同一オリジンからの要請に対しては、ドメイン部分のみをリファラー情報として送信する。同一オリジンからの要請に対しては、リファラー用に削った全部情報を送信する。
    • strict-origin-when-cross-originTLSで保護されたクライアントから信用に値し得ないURLへの送信の際は、リファラーヘッダを削除し、リファラー情報を送信しない。その他の場合で、非同一オリジンからの要請に対しては、ドメイン部分のみをリファラー情報として送信する。その他の場合で、同一オリジンからの要請に対しては、リファラー用に削った全部情報を送信する。
    • unsafe-urlリファラー用に削った全部情報を送信する。
  • rel→値は、rel属性値の表で「指定可」とされている値とその他リンク先・リソースとの関係を示す。原則として複数指定不可。
  • target→値は下記のとおり。リンク先を開く場所を示す。
    • _blank別ウィンドウ又は別タブ
    • _top入れ子閲覧文脈の中で、当該要素が現在属している閲覧文脈の最上位の祖先閲覧文脈
    • _parent入れ子閲覧文脈の中で、当該要素が現在属している閲覧文脈閲覧文脈
    • _self→当該要素が現在属している閲覧文脈
    • その他妥当な閲覧文脈名→「_」(アンダースコア)で始まらない一文字以上の文字列。当該要素が現在属している入れ子閲覧文脈の中又は当該要素が属していない既に開いている別ウィンドウ(もしくは別タブ)に該当する閲覧文脈名のものがあれば、そこに開く。それがなければ、当該閲覧文脈名にて別ウィンドウ又は別タブを開く。
  • shape→値は下記のとおり。area要素によって示される領域の形状を指定する。デフォルトは、rect
    • rect→四角形。
    • circle→円形。
    • poly→多角形。
    • default→画像全体。
  • coords→カンマ区切りの整数リストshape属性によって与えられ形状の座標を示す。座標は、画像の上左隅を基点とし、そこからの距離をpx単位で表した「x,y」の組(xは横方向、yは縦方向)が基本。shape属性値defaultの場合は、指定禁止。それ以外の場合は必須。
    • shape属性値rectの場合→「x1,y1,x2,y2」。一番目の座標は領域となる四角形の上左隅、二番目の座標は領域となる四角形の下右隅。
    • shape属性値circleの場合→「x,y,r」。「x,y」は領域となる円の中心の座標であり、rは領域となる円の半径。
    • shape属性値polyの場合→「xi,yi」がカンマ区切りで3個以上。領域となる多角形のすべての点の座標を並べる。
  • href属性がない場合は、downloadpingreferrerpolicyreltargetの各属性は省略しなければならない。
  • itemprop属性がある場合は、href属性は必須。

W3C : HTML5.3:下記の属性が許容されていた。

HTML構文におけるタグの省略
  • Void elementなので、終了タグはなし。ただし、開始タグの末尾をスラッシュで閉じてもよい(/>)。
WAI-ARIA
  • href属性がある場合は、
    • デフォルトroleは、linkデフォルトroleは、role属性値に指定すべきでない。
    • デフォルトrole以外のroleは、指定不可。
  • href属性がない場合は、
    • roleは指定不可。
視覚系ブラウザデフォルトとして期待されるCSS

  area {display: none;}

  :link {
    color :#0000EE;
    text-decoration: underline;
    cursor: pointer;
  }

  :visited {
    color: #551A8B;
    text-decoration: underline;
    cursor: pointer;
  }

  :link:active,
  :visited:active {
    color: #FF0000;
  }

  
ユーザーエージェントに対する特記事項
  • hreflang属性値及びtype属性値を信頼できる値だとみなしてはならない。
  • ダウンロードしたファイルファイル名を設定する際には、download属性値よりも、Content-Disposition HTTPヘッダファイル名パラメータを優先することができる。
  • href属性値#topで参照先が見つからない場合、あるいは、#の場合は、当該HTML文書の先頭に移動する。
  • ping属性については、ユーザーの設定に従って、これを完全に又は選択的に無視してもよい。
  • ping属性がある場合は、ハイパーリンクをたどることで、ピンの送信が背後で行われることを明示すべきである。
意味・用法

href属性を持つ場合は、イメージマップ上のハイパーリンク領域を表す。

href属性を持たない場合は、イメージマップ上の選択不能領域を表す。

アクセシビリティ関連

私見・補足

ブラウザによっては、画像非表示時のalt属性値による代替テキストの表示はかなり不恰好。

よって、イメージマップの近くに、それと同等の機能を果たすa要素を適切に並べたリンク集を作成しておいた方がよい。

表示確認

map要素を参照。