HTML5のリンクタイプ(link rel)種類


HTML5 mug当サイトのテーマをmonochromeに変更し、HTML5化がひととおり進んだところではあるのですが、w3c checkerでチェックすると、相変わらずエラーが出ちゃいます。

そのエラーのほとんどが<head>部分にある<link rel=”~~~”> のrel=リンクタイプがHTML5に未定義のものを使っていますよ、というもの。

じゃあHTML5に定義されているリンクタイプって何なのよ?ということで調べてみました。

rel=”stylesheet”
みなさんご存じスタイルシートの指定方法。HTML5ではtype属性(type=”style/css”)は省略してもいいようです。
1
2
<!-- スタイルシートの指定方法-->
<link rel="stylesheet" href="./style.css">
rel=”icon”
これもご存じ、サイトのアイコンを指定します。お気に入り登録したときにアイコンを独自のものにしたいときとか、そういうときですね。
1
2
<!--アイコンの指定 -->
<link rel="shortcut icon" href="./favicon.ico">
なかなかアイコンって用意できないんですよねぇ・・・。
rel=”alternate”
例えばRSSやAtom配信を行っている場合に、サイト訪問者が使っているブラウザが自動的に「このサイトはRSS配信してますよ」という通知を受けることができるものです。
rel=”alternate”はtype属性と組み合わせて使います。下の例では上段がフィードの指定、下段はこのページのPDF版はこちら、みたいな形式です。
1
2
3
4
<!-- フィード通知 -->
<link rel="alternate" type="application/atom+xml" title="this site feed" href="http://test.co.jp/feed/atom/">
<!-- PDFです -->
<link rel="alternate" type="application/pdf" title="this site pdf" href="http://test.co.jp/feed/test.pdf">
rel=”archives”
このページに関連するサイトとして、href属性の中に指定できます。wordpressで言えば、この記事の関連するサイトとして今月書いた索引ページを指定するような感じです。ただ関連するからと言ってあまり多く指定してもいけない気がすると思います。
1
2
<!--関連ページ指定-->
<link rel="archives" title="2011年7月の記事一覧" href="http://test.co.jp/2011-070.html">
rel=”author”
このページを作った人のサイトを指定します。問い合わせのページや最近のブログでは自己紹介ページもあったりするしTwitterでもいいと思います。またmailto:でメールアドレスの指定も可能とのことです。
1
2
<!--作者の指定-->
<link rel="author" title="しんどーについて" href="mailto:hogehoge@hogehoge.jp">
rel=”external”
リンク先は自サイトとは無関係ですよーということを表します。特に<link rel>で使うことはないかと思いますが、<a>タグでよく使うかもしれません。例えばjquery.mobileでは、jquery.mobileのサイトではない場所へのリンクを張るときはこれを指定しないといけません。普段は意識しないで作ることが多いですけれど、知っておくと、わからないタグにもきちんと意味があるということが分かりますね。
1
2
<!--無関係サイトです-->
<a href="http://test.co.jp/" title="別ページです" rel="external">別ページへリンク</a>します。
rel=”first”、rel=”last”、rel=”prev”、rel=”next”、rel=”up”
それぞれサイトの「最初の記事」「最後の記事」「1つ前の記事」「1つ次の記事」「階層的に上のページ」を指定します。例えば当サイトで「最初の記事」はwordpress設置時の2011/06/23 hello worldになるし、階層的に上のページはこの記事のカテゴリー「wordpress」のページになります。
1
2
<!--最初の記事-->
<link rel="first" title="hello world" href="http://test.co.jp/test.html">
ちなみにrel=”first”、rel=”prev”にはHTML4時代の互換性を保持するため、rel=”start”、rel=”previos”という指定も一応はOKになっています・・があくまで古い指定方法なので、HTML5に合わせるならfirst、prevを使いましょう。
rel=”license”
指定したページ・・というよりダウンロードさせるデータを指定することが多いかもしれません。その指定したデータがどのライセンス(MITなど)のもと著作権の確保をしているかを指定します。これも<link rel>で指定するものではなく、<a>での仕様が多いかも。
rel=”tag”
このリンクはタグですよ、という指定。metaタグのkeywordの代わりにはなりません。
その他
rel=”nofollow”:指定されたページは承認されていません。
rel=”noreferrer”:リンクに飛んでもリファラーをつけないでね、という指定。でもサポートしているブラウザは今のところありません。
rel=”pingback”:ピンを受け取るサーバがあればそれを指定。wordpressではピンを受け取って投稿できるシステムがありますね。HTMLソースをみると当サイトも指定してます。使ってないけど。
rel=”search”
rel=”sidebar”

以上、長くなって後半ははしょり気味ですけれどこんな感じです。今のところHTML5で指定できるのはこれらの種類です。当サイトではEditURLとかがエラーになっています。

ところが、用途がいまだ不明な<link rel=”wlwmanifest“>というものがw3c checkerではスルーされています。一応rel属性は自分で作ってよいという条件と、HTML5もまだ未完成でこれからもっともっと標準化していくので、このように不明なものもいずれは採用されているのかもしれません。