link  変更 : 外部リソースにリンク

カテゴリ

<!-- 外部CSSを導入 -->
<link rel="stylesheet" href="default.css">
<!-- faviconを設定。だいたいはトップ階層のfavicon.icoを勝手に取得して表示するので、この例と同じなら実は無くても良い -->
<link rel="icon" href="/favicon.ico">
<!-- 画面幅600ピクセル以下の端末でのみmobile.cssを導入 -->
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">
<!-- 外部フォントをプリロード -->
<link rel="preload" href="https://fonts.example.com/font.woff2" as="font" crossorigin type="font/woff2">
<!-- 外部HTMLテンプレートをインポート -->
<link rel="import" href="template.html">
<!-- RSSを設定 -->
<link rel="alternate" type="application/atom+xml" href="posts.xml" title="Cool Stuff Blog">
<!-- 代替CSSを設定(初期には適用されない) -->
<link rel="alternate stylesheet" href="contrast.css" title="High contrast">

説明

href属性で指定したリソースにリンクする。 よく利用されるのは、CSSの導入(rel="stylesheet")。

HTML5でCSSのlink(rel="stylesheet")のみ、body内で可能になった。 今後はmodulepreload/pingback/dns-prefetch/preconnect/prefetch/preload/prerenderといった追加のキーワードがbodyで可能になる予定。

同じ内容をLink HTTPヘッダーで指定する事も可能(RFC 8288 - Web Linking

属性 属性値の見方

rel=preloadまたはrel=prefetchを指定した場合に、プリロード/プリフェッチするコンテンツの種類を示す。だいたい要素名(音声ならaudio、JavaScriptならscript)だが、画像ならimageだったりして地味に異なる。
指定値と実際に利用するシーンの一覧は以下の通り:
  • audio: audio
  • video: video
  • track: track
  • script: track/WorkerのimportScripts
  • style: link rel=stylesheet/CSSの@import
  • font: CSSの@font-face
  • image: img/picture/srcset/SVGのimage/CSSの*-image
  • fetch: フェッチ
  • worker: Worker/SharedWorker
  • embed: embed
  • object: object
  • document: iframe

各ブラウザの実装状況はrel=preload/prefetchとだいたい同じ。

rel=mask-icon時の色。Safari独自仕様のはずだけど、良いのかそんなん仕様書に入れて。。
オリジンをまたいでリンク先リソースを取得する場合に、以下の通り情報を付与する。CORS
  • anonymous: HTTP Originヘッダー有り/CookieやBASIC認証情報等の信用情報無し
  • use-credentials: HTTP Originヘッダー有り/CookieやBASIC認証情報等の信用情報有り
  • 指定なし: HTTP Originヘッダー無し
リンク先リソースの言語コード。jaとかenとかfrとか。
リソースが例えば悪い人がサーバーに入ってゴニョゴニョしたとかで改ざんされたかをブラウザがこの値を使って検証する。詳細はSubresource Integrity (SRI)を参照。
ワンタイムキーのようなもの。(リンク先ではなく)その文書自身のHTTPヘッダーの当該nonceと合致した場合にリソースを妥当とみなす。大文字小文字を区別する。 詳細はContent Security Policy (CSP)参照。
リファラー(REFERER)をリクエスト時に送信するかどうかを指定する。Referrer Policyに則ったキーワードを指定する。
リンク先のリソースとの関係。仕様書に記載がある値は以下の通り(これらに限定されない)。
  • alternate: その文書の代替(hreflang属性と併用して別言語版など)。stylesheetと同時指定すると代替スタイルシート。type属性がapplication/rss+xmlapplication/atom+xmlの場合はいわゆるRSSリーダーでの購読用のURLを示す。ブラウザによってはこれに反応する。
  • author new: 著者
  • canonical 未来: その文書の正規版とか推奨版を示す。例えばガラケー版とPC/スマホ版があってPC/スマホ版を正としたいとか。二重にあるとSEO的に不利なので、SEO的には設定する事が推奨されている。5.2の変更点一覧に載ってるけど仕様には無い。
  • dns-prefetch/preconnect/prefetch/prerender 未来: 各種先読み技術でユーザー体験の向上を図る。詳細はResource Hints参照。
  • help: ヘルプ
  • icon new: favicon。実は長らく独自仕様だった。古くはshortcut iconと書いていたが、shortcutは不要に。詳しくはfavicon(ブックマークアイコン、お気に入りアイコン)について参照。
  • import 未来: href属性には部分HTMLファイルを指定する。templateを外部化したみたいなもの。スクリプトから呼び出して利用する。孫インポートも可で、何度同じファイルをインポートしても問題にはならない。
  • license new: ライセンス情報
  • modulepreload 未来: リソースをスクリプトのモジュールとして優先的にプリロードする。
  • pingback 未来: ピングバック先URL。Pingback
  • next: 次の文書
  • preload 未来: リソースをプリロードする。プリロードだけ行い、実際の読み込みは別途行う。プリロードするリソースの種類をas属性で指定する。詳細はPreload参照。
  • prev: 前の文書
  • search new: サイト内検索。OpenSearchを指定できる。現在少なくともFirefox/IE/Chromeが対応している。
  • stylesheet: スタイルシート
HTML5で無くなったキーワードは以下。
  • start
  • contents
  • index
  • glossery
  • copyright
  • chapter
  • section
  • subsection
  • appendix
relの逆と説明はあるものの、内容の説明が無い。HTML5で一旦削除されたが、RDFaをサポートするためにやっぱ必要だよねって事で再び追加された。が最新版では再び消えている。
rel属性がiconまたはapple-touch-icon(!)の場合に、どのアイコンサイズにリソースを使用すべきかを提案する。Appleの俺仕様に等しいので各ブラウザのサポート状況はチェックしていない。
rel="alternate stylesheet"の際にはデザインテーマの名前を指定し、複数のテーマから切り替える事ができる。どこで切り替えるかはブラウザによる。

他にはrel=alternateとhreflang属性と併用する事で、ドキュメントの別言語バージョンにリンクする時の説明としてtitle属性が用いる事も可能。

リンク先のリソースのHTTPリクエストのContent-Typeヘッダーを利用する事
不要