rel属性

area要素のrel属性は、現在のドキュメントとリンク先ドキュメントとの関連性を示すリンクタイプを指定する任意属性。

ブラウザ対応

構文

<area href="URL" alt="代替テキスト" rel="リンクタイプ">

リンクタイプ

alternate
現在のドキュメントの代替ドキュメントへのリンクであることを示す。
author
現在のドキュメントや記事の著者へのリンクであることを示す。
bookmark
ブックマークのためのパーマリンク（固定リンク）であることを示す。
help
ヘルプ・ドキュメントへのリンクであることを示す。
license
著作権情報へのリンクであることを示す。
next
一連のドキュメントにおける次のドキュメントへのリンクであることを示す。
nofollow
リンク先ドキュメントをフォローしない。
noreferrer
リンク先へHTTPリファラを送らない。
prefetch
リンク先ドキュメントを先制キャッシュ。
prev
一連のドキュメントにおける前のドキュメントへのリンクであることを示す。
search
現在のドキュメントとその関連ページを検索するために使用可能なリソースへのリンクであることを示す。
tag
現在のドキュメントのタグであることを示す。

要点

  • area要素のrel属性は、現在のドキュメントとリンク先ドキュメントとの関連性を示すリンクタイプを指定する属性である。
  • rel属性は、area要素にhref属性がある場合だけ使用する。area要素にhref属性がない場合、rel属性は、省略しなければならない。
  • rel属性は、HTML5にて新たに導入された属性である。

サンプルコード

パーマリンク（固定リンク）

<area shape="rect" coords="0,0,100,50" href="sample.html" alt="サンプル" rel="bookmark">

著作権情報へのリンク

<area shape="rect" coords="0,0,100,50" href="sample.html" alt="サンプル" rel="license">

ヘルプ・ドキュメントへのリンク

<area shape="rect" coords="0,0,100,50" href="sample.html" alt="サンプル" rel="help">

サンプル

HTMLソースコード

<img src="sample-area.png" usemap="#sample-area">
<map name="sample-area">
	<area shape="circle" coords="50,50,40" href="http://html5.cyberlab.info/elements/embedded/area-target.html" alt="target属性" rel="prev">
	<area shape="rect" coords="110,10,190,90" href="http://html5.cyberlab.info/elements/embedded/area-hreflang.html" alt="hreflang属性" rel="next">
	<area shape="polygon" coords="250,10,206,86,294,86" href="http://html5.cyberlab.info/elements/embedded/area-target.html" alt="target属性" rel="prev">
	<area shape="polygon" coords="350,10,315,30,315,70,350,90,385,70,375,30" href="http://html5.cyberlab.info/elements/embedded/area-hreflang.html" alt="hreflang属性" rel="next">
</map>

実際の表示