area 要素

4.7.12 area 要素

カテゴリー:
フロー・コンテント
フレージング・コンテント
この要素を使うことができるコンテキスト:
フレージング・コンテントが期待される場所。ただし、祖先に map 要素がある、または、祖先に template 要素がある場合に限ります。
コンテントモデル:
コンテント属性:
グローバル属性
alt - 画像が利用できないときに使う代替テキスト
coords - イメージマップの中に生成する形状の座標
download - リソースにナビゲートするのではなくダウンロードするかどうか。そうなら、そのファイル名
href - ハイパーリンクのアドレス
hreflang - リンクされたリソースの言語
rel - ハイパーリンクを含んでいるドキュメントとリンク先のリソースとの間の関係性
shape - イメージマップの中に生成する形状の種類
target - ハイパーリンクナビゲーションブラウジングコンテキスト
type - 参照されるリソースのタイプに対するヒント
text/html におけるタグの省略:
終了タグはありません
指定可能な ARIA role 属性 の値:
link ロール (デフォルト - 指定不要)
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性
DOM インタフェース:
interface HTMLAreaElement : HTMLElement {
           attribute DOMString alt;
           attribute DOMString coords;
           attribute DOMString shape;
           attribute DOMString target;
           attribute DOMString download;

           attribute DOMString rel;
  readonly attribute DOMTokenList relList;
           attribute DOMString hreflang;
           attribute DOMString type;
};
HTMLAreaElement implements URLUtils;

area 要素は、いくつかのテキストを持ったハイパーリンクとイメージマップ上の対応する領域、または、イメージマップ上の無効な領域のいずれかを表します。

親ノードを持つ area 要素は、祖先に map 要素、または、祖先に template 要素を持たなければいけません。

area 要素が href 属性を持つなら、その area 要素はハイパーリンクを表します。この場合、alt 属性は必須です。これはハイパーリンクのテキストを指定します。イメージマップの他のハイパーリンクに対して指定されたテキストと画像の代替テキストが提供されるが、自身の画像が提供されないとき、そのテキストは、そのハイパーリンクがテキストなしに形状とともに使われるときにその画像に適用されたはずのと同じ種類の選択を提供するものでなければいけません。同じイメージマップの中に、同じリソースを差し、かつ、空でない alt 属性を持つ area 要素が他にあるなら、この alt 属性は空のままにしておくことができます。

area 要素が href 属性を持たなければ、この要素で表される領域は選択できません。alt 属性は省略されなければいけません。

いずれの場合も、shapecoords 属性は、その領域を指定します。

shape 属性は列挙属性です。下表はこの属性に定義されているキーワードをリストしたものです。キーワードの行の最初のセルに記載された状態は、そのキーワードに対応する状態を表します。いくつかのキーワードは、最後のカラムに記載されている通り、非準拠となります。

状態 キーワード 備考
Circle state circle
circ 非準拠
Default state default
Polygon state poly
polygon 非準拠
Rectangle state rect
rectangle 非準拠

この属性は省略できます。省略時のデフォルトは、rectangle 状態です。

coords 属性は、指定されたら、妥当な整数リストを含まなければいけません。この属性は、shape 属性によって描かれる形状の座標を与えます。この属性の処理は、イメージマップ処理モデルの一部として説明されています。

circle 状態では、area 要素は、coords 属性を持たなければならず、この属性は、3 つの整数を持ち、その最後は、非負整数でなければいけません。最初の整数は、イメージの左端から円の中心までの距離を CSS ピクセルで表したものでなければいけません。2 つ目の整数は、イメージの上端から円の中心までの距離を CSS ピクセルで表したものでなければいけません。そして、3 つ目の整数は、円の半径を、これもまた CSS ピクセルで表したものでなければいけません。

default 状態では、area 要素は、coords 属性を持ってはいけません。(イメージ全体がその領域になります)

polygon 状態では、area 要素は、少なくとも 6 つ以上の偶数個の整数を伴った coords 属性を持たなければならず、その整数の数は偶数でなければいけません。整数のそれぞれのペアは、それぞれ、イメージの左と上からの距離を CSS ピクセルで表して与えられた座標を表します。そして、すべての座標はまとめて、多角形の頂点の位置を順番に表さなければいけません。

rectangle 状態では、area 要素は、正確に 4 つの整数を伴った coords 属性を持たなければいけません。最初の整数は、3 つ目の整数より小さくなければいけません。そして、2 つ目の整数は、4 つ目の整数より小さくなければいけません。この 4 つの地点はそれぞれ、イメージの左端から矩形の左側までの距離、上端から上側までの距離、左端から右側までの距離、上端から下側までの距離を、すべて CSS ピクセルで表したものでなければいけません。

ユーザーエージェントがユーザーに、area 要素を使って生成されたハイパーリンクをたどったりハイパーリンクをダウンロードしたりすることができるようにするとき、次のセクションで説明されているとおり、href, target, download 属性は、そのリンクをどうやってたどるのかを決めます。rel, hreflang, type 属性は、ユーザーがリンクをたどる前に、対象のリソースはどんな特性を持っているのかを示すために使われます。

target, download, rel, hreflang, type 属性は、もし href 属性が存在しなければ、省略されなければいけません。

area 要素のアクティベーション・ビヘイビアでは、次の手順を実行します:

  1. area 要素の Document完全にアクティブなら、これらの手順を中止します。

  2. area 要素が download 属性を持ち、アルゴリズムがポップアップ表示を許可されていない、または、要素の target 属性が存在し、ブラウジングコンテキスト名に target 属性の値を使って、ブラウジングコンテキスト名を指定してブラウジングコンテキストを選択する規則を適用した結果が、選択したブラウジングコンテキストが存在しないという結果になったなら、次の副手順を実行します:

    1. エントリ設定オブジェクトがあれば、InvalidAccessError 例外を投げます。

    2. ハイパーリンクをたどらずに、これらの手順を中止します。

  3. 上記に該当しなければ、ユーザーエージェントは、area 要素によって生成されたハイパーリンクがあれば、download 属性によって決められたとおりに、そして、ユーザー設定のとおりに、そのハイパーリンクをたどるか、そのハイパーリンクをダウンロードしなければいけません。

IDL 属性 alt, coords, target, download, rel, hreflang, type はそれぞれ、同じ名前の対応するコンテント属性を反映しなければいけません。

IDL 属性 shape は、shape コンテント属性を反映しなければいけません。

IDL 属性 relList は、rel コンテント属性を反映しなければいけません。


area 要素は、URLUtils インタフェースもサポートします。 [URL]

要素が生成されるとき、そして、要素の href コンテント属性がセットされるとき、ユーザーエージェントは、その要素の URLUtils インタフェースの入力セットアルゴリズムを呼びださなければいけません。href コンテント属性の値があれば、その値を、なければ、空文字列を引数として与えます。

要素の URLUtils インタフェースのベース取得アルゴリズムは、単に、その要素のベース URL を返さなければいけません。

要素の URLUtils インタフェースのクエリ・エンコーディングは、ドキュメントの文字エンコーディングです。

要素の URLUtils インタフェースが文字列 value を使ってアップデート手順を呼び出すとき、ユーザーエージェントは、その要素の href コンテント属性を、その文字列 value にセットしなければいけません。


※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-area-element