linkのrelの種類と効能等
Published at 2014-09-01
Web Componentsの流れでHTMLImportsをよく見るようになったり、パフォーマンス周りでプリフェッチ系の属性が<link>で指定するようになったりしている今日この頃。気になったのでW3Cの Links in HTML documents を眺めたメモ。
そもそもリンクとは一体何なのか？
Webにおけるリンクは、<a>と<link>の2種類がある。それらには、 Webのあらゆるリソースの場所 を示す役割が与えられている。つまり、hrefで指定しているURLがそれにあたる。そのURLの振る舞いの種類については、relやrevで記述する、と。revって削除されるんだっけ？
<img>や<form>といったように、リソースへのリンクはその他のHTML要素でも行う。が、<link>についてはドキュメントの<head>にだけ記述し描画されず、<a>はドキュメントの<body>にのみ現れる。
気になるrelの種類
relに指定するのは リンク元から見たリンク先の種別 。だから、利用シーンをあまり見ないけど、<a>でもrelは指定可能である。
- 6.12 Link types HTML4.01のRecommendation
- 4.8 Links — HTML5 HTML5のCandidate Recommendation
HTML5の方を列挙してみる。
| 種類 | <link> | <a> & <area> | 説明 |
|---|---|---|---|
| alternate | Hyperlink | Hyperlink | 代替となるドキュメントを指定する。 |
| author | Hyperlink | Hyperlink | ドキュメントや記事の著者へのリンクを指定する。 |
| bookmark | not allowed | Hyperlink | 最も近い先祖セクションへのパーマリンクを指定する。 |
| help | Hyperlink | Hyperlink | ドキュメントに対するヘルプへのリンクを指定する。 |
| icon | External Resource | not allowed | 現在のドキュメントを代理するアイコンをインポートする。 |
| license | Hyperlink | Hyperlink | 現在のドキュメントのライセンスを説明するドキュメントを指定する。 |
| next | Hyperlink | Hyperlink | 現在のドキュメントはシリーズの一部であることを示し、連続する次のドキュメントを指定する。 |
| nofollow | not allowed | Annotation | 現在のドキュメントのオリジナルの著者や発行者が参照されたドキュメントを支持しないことを示す。 |
| noreferrer | not allowed | Annotation | ハイパーリンクに飛ぶ際、HTTPリファラを送信しないことを要求する。 |
| prefetch | External Resource | External Resource | 先行してキャッシュされるべきリソースを指定する。 |
| prev | Hyperlink | Hyperlink | 現在のドキュメントはシリーズの一部であることを示し、連続する前のドキュメントを指定する。 |
| search | Hyperlink | Hyperlink | 現在のドキュメントや関連するページを探すためのリソースへのリンクを指定する。 |
| stylesheet | External Resource | not allowed | スタイルシートのインポート。 |
| tag | not allowed | Hyperlink | 与えられたアドレスで特定されるタグを付与する。 |
<link rel='dns-prefetch' href='[URL]'とかも対応ブラウザでは動くけど、ドラフトにもない。
HTML Imports
先程の表には<link rel='import'>も含まれていない。これはまだワーキングドラフトだからだと思うけど、せっかくなので紹介。
To enable declaring imports in HTML, a new link type is added to HTML link types: The import keyword may be used with link elements. This keyword creates an external resource link to an import. The default type for resources given by the import keyword is text/html. The link element may have an async attribute. The async attribute is a boolean attribute. The appropriate time to obtain the resource is when the external resource link is created or when its element is inserted into a document, whichever happens last.
ざっくり翻訳。
HTMLにおける宣言的なインポートを可能にし、新たなリンクタイプとして追加される。 importキーワードはlink要素に使われる。importキーワードによって外部リソースをインポートするリンクを作成する。 importによって与えられるリソースのデフォルトの種別はtext/htmlである。 link要素にはasync属性がある。async属性は真偽値である。 指定されたリソースの獲得は、リンクが作成されたときかlink要素がドキュメントに追加されたタイミングで、いずれも最後に実行される。
オチも見つからなかったわけだけど、せっかく一覧表まで組んだので記事にしてしまった。