★HTML5タグリファレンス

<area> …… イメージマップのハイパーリンク領域を設定する

<area>タグは、イメージマップのハイパーリンク領域を設定する際に使用します。
<area>は<map>～</map>の中に配置します。

href属性は、ハイパーリンク先のURLを指定する際に使用します。
href属性を指定する場合には、alt属性が必須となります。
alt属性にはハイパーリンクのテキストを指定します。
反対に、href属性を指定しない場合には、alt属性も省略しなくてはなりません。

尚、href属性を指定しない<area>は、その領域からリンクを外すという意味を持ちます。
他のhref属性を指定した<area>と組み合わせることで、
例えば、円形から三角形を切り抜くなど、より複雑な形状のハイパーリンク領域を指定することが可能となります。

ハイパーリンク領域の形状は、shape属性で指定します。
指定できる形状は、円形・多角形・四角形のいずれかで、circle・default・poly・rectなどのキーワードで指定します。
shape属性を省略した場合には、ハイパーリンク領域の形状は四角形となります。

• circle …… 円形（正円のみ指定可能、楕円は指定できない）
• default …… 初期状態（画像全体がハイパーリンク領域となる）
• poly …… 多角形
• rect …… 四角形

coords属性は、ハイパーリンク領域の座標を指定する際に使用します。
座標は、半角カンマ（ , ）区切りの整数のリストで指定します。

shape属性でcircleなどのキーワードで円形を指定している場合には、coords属性の値は３つの整数のリストとなります。
１つ目の整数は画像の左端から円の中心までのピクセル距離、
２つ目の整数は画像の上端から円の中心までのピクセル距離、
３つ目の整数は円の半径のピクセル距離となります。

shape属性でdefaultのキーワードで初期状態を指定している場合には、coords属性は指定できません。
この場合、画像全体がハイパーリンク領域となります。

shape属性でpolyなどのキーワードで多角形を指定している場合には、coords属性の値は少なくとも６つ以上の偶数個の整数のリストとなります。
整数２つごとに順番にペアとなって座標が決定されますが、整数のペアが３組あれば三角形、４組あれば四角形、５組あれば五角形…という具合です。
各ペアは画像の左端と上端からのピクセル距離となります。

shape属性でrectなどのキーワードで四角形を指定している場合には、coords属性の値は４つの整数のリストとなります。
shape=”poly”で四角形を指定する場合は８つの整数のリストが必要ですが、
shape=”rect”で四角形を指定する場合は４つの整数のリストです。
４つの整数はそれぞれ順番に、
画像の左端からハイパーリンク領域の左端までのピクセル距離、
画像の上端からハイパーリンク領域の上端までのピクセル距離、
画像の左端からハイパーリンク領域の右端までのピクセル距離、
画像の上端からハイパーリンク領域の下端までのピクセル距離、
となります。

target属性・ping 属性はハイパーリンクをどのようにたどるかを、
rel属性・media属性・hreflang属性・type 属性は、ハイパーリンク先がどのような性質であるかを示す際に指定します。
target属性・ping属性・rel属性・media属性・hreflang属性・type 属性は、
href属性を指定しない場合には省略しなくてはなりません。

■HTML4.01からHTML5へのバージョンアップによる変更点

area要素は、HTML5ではnohref属性が廃止されています。
一方で、新しくhreflang属性・media属性・rel属性・type属性が追加されています。

■属性

■使用例