href属性 ≪ area要素 ≪ 埋め込みコンテンツ ≪ 要素 ≪ HTML5入門

href属性

area要素のhref属性は、リンク先のURLを指定する任意属性。

ブラウザ対応

構文

<area href="URL" alt="代替テキスト">

URL

URLに指定出来る値。

絶対URL。例：http://html5.cyberlab.info/sample.png
相対URL。例：sample.png

alt属性

area要素にhref属性を指定する場合、alt属性も指定する必要がある。ただし、href属性の値（リンク先）が同じarea要素が複数あり、何れか１つのarea要素にalt属性が指定してある場合、他のarea要素のalt属性を省略できる。

サンプルコード

絶対URL

<img src="sample.png" usemap="#sampleImgMap">
<map name="sampleImgMap">
	<area shape="rect" coords="0,0,100,50" href="http://html5.cyberlab.info/sample1.html" alt="サンプル１">
	<area shape="rect" coords="100,0,200,50" href="http://html5.cyberlab.info/sample2.html" alt="サンプル２">
</map>

相対URL

<img src="sample.png" usemap="#sampleImgMap">
<map name="sampleImgMap">
	<area shape="rect" coords="0,0,100,50" href="sample1.html" alt="サンプル１">
	<area shape="rect" coords="100,0,200,50" href="sample2.html" alt="サンプル２">
</map>

alt属性を省略できる場合

<img src="sample.png" usemap="#sampleImgMap">
<map name="sampleImgMap">
	<area shape="rect" coords="0,0,100,50" href="sample.html" alt="サンプル">
	<area shape="rect" coords="100,0,200,50" href="sample.html">
	<area shape="rect" coords="200,0,300,50" href="sample.html">
</map>

リンク先が同じ３つのarea要素のうち、２つ目と３つ目のarea要素のalt属性を省略している。

サンプル

HTMLソースコード

<img src="sample-area.png" usemap="#sample-area-1">
<map name="sample-area-1">
	<area shape="circle" coords="50,50,40" href="http://html5.cyberlab.info" alt="ホーム">
	<area shape="rect" coords="110,10,190,90" href="http://html5.cyberlab.info/elements/" alt="要素">
	<area shape="polygon" coords="250,10,206,86,294,86" href="http://html5.cyberlab.info/elements/embedded/img.html" alt="img要素">
	<area shape="polygon" coords="350,10,315,30,315,70,350,90,385,70,375,30" href="http://html5.cyberlab.info/elements/embedded/map.html" alt="map要素">
</map>