1000ch.net

2014.09.01

linkのrelの種類と効能等

Web Componentsの流れでHTMLImportsをよく見るようになったり、パフォーマンス周りでプリフェッチ系の属性が<link>で指定するようになったりしている今日この頃。気になったのでW3Cの Links in HTML documents を眺めたメモ。

そもそもリンクとは一体何なのか?

Webにおけるリンクは、<a><link>の2種類がある。それらには、 Webのあらゆるリソースの場所 を示す役割が与えられている。つまり、hrefで指定しているURLがそれにあたる。そのURLの振る舞いの種類については、relrevで記述する、と。revって削除されるんだっけ?

<img><form>といったように、リソースへのリンクはその他のHTML要素でも行う。が、<link>についてはドキュメントの<head>にだけ記述し描画されず、<a>はドキュメントの<body>にのみ現れる。

気になるrelの種類

relに指定するのは リンク元から見たリンク先の種別 。だから、利用シーンをあまり見ないけど、<a>でもrelは指定可能である。

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要素がドキュメントに追加されたタイミングで、いずれも最後に実行される。

オチも見つからなかったわけだけど、せっかく一覧表まで組んだので記事にしてしまった。