HTML Tag Reference

link 要素

文書を他の外部リソースと関連付ける

link 要素は文書を他の外部リソースと関連付けます。

外部スタイルシートを読み込む目的で利用されるケースはおなじみですが、スタイルシートだけでなく、外部リソースと文書を関連付けることができます。対応しているブラウザでは、この link 要素を使用してナビゲーションリンクを表示したりすることもできます。

link 要素の仕様

カテゴリ
コンテンツモデル
この要素を使用できる文脈
  • head 要素の子要素である noscript 要素の子要素として
  • メタデータ・コンテンツが期待される場所
  • itemprop 属性が付与された場合はフレージングコンテンツが期待される場所

詳細説明

link 要素に指定できる属性

属性 概要
href 属性 リンク先の URI を指定します。
rel 属性 現在の文書からみた、リンク先となるリソースの位置づけを指定します。
media 属性 リンク先の外部リソースが、どのメディアに適用するのかを指定します。
hreflang 属性 リンク先文書の記述言語を指定します。
type 属性 リンク先の MIME タイプを指定します。
sizes 属性 関連付けられた画像ファイルなどのサイズを指定します。
crossorigin 属性 CORS （Cross-Origin Resource Sharing / クロスドメイン通信） 設定属性です。サードパーティ （元の文書とは異なるオリジン） から読み込んだ画像などのリソースを利用する際のルールを指定します。
integrity 属性 サブリソース完全性（SRI）機能を用いて、取得したリソースが予期せず改竄されていないかをユーザエージェントが検証するためのハッシュ値を指定します。
referrerpolicy 属性 リンク先にアクセスする際、あるいは画像など外部リソースをリクエストする際にリファラ（アクセス元の URL 情報）を送信するか否か（リファラポリシー）を指定します。
imagesrcset 属性 先読みされる複数の画像リソースを指定します。指定方法は srcset 属性と同じで、link 要素に rel="preload" かつ、as="image" が指定された場合にのみ使用可能です。
imagesizes 属性 先読みされる画像のサイズを指定します。指定方法は sizes 属性と同じで、link 要素に rel="preload" かつ、as="image" が指定された場合にのみ使用可能です。
as 属性 link 要素によって読み込まれるコンテンツの種類を指定します。link 要素に rel="preload" または rel="prefetch" が指定された場合にのみ使用可能です。
blocking 属性 要素が潜在的にレンダリングブロッキングであるかどうかを指定します。link 要素に rel="modulepreload"、rel="preload"、rel="stylesheet" が指定された場合にのみ使用可能です。
color 属性 link 要素において、rel="mask-icon" が指定された場合にのみ有効な属性です。ブラウザがピン止め機能で使用する色を指定します。
disabled 属性 link 要素が無効であるかどうかを指定します。link 要素に rel="stylesheet" が指定された場合にのみ使用可能です。
fetchpriority 属性 link要素が外部リソースを読み込む場合、そのリソースを取得する優先度を指定します。

link 要素によるスタイルシートの読み込み

link 要素に rel="stylesheet" を指定することでスタイルシートファイルと文書を関連付けることができますが、この際、rel属性値に alternate stylesheet 値と、title 属性によって名前を与えることで、閲覧者によって切り替え可能な代替スタイルシートを提供することができます。

固定 / 優先 / 代替スタイルシート

文書に読み込まれるスタイルシートには 3種類の優先順位があります。通常は title 属性を付与せずに読み込まれる固定スタイルシートです。下記のように読み込みます。

<link rel="stylesheet" href="style.css" />

これに対して title 属性を付与すると、そのスタイルシートは優先スタイルシートとして扱われます。下記のように 3つのスタイルシートを文書内で読み込むと、1行目の固定スタイルシートは通常通り読み込まれますが、2行目、3行目の優先スタイルシートは、先に記述された 「スタイル01」 だけが読み込まれることになります。

<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style01.css" title="スタイル01" />
<link rel="stylesheet" href="style02.css" title="スタイル02" />

さらに、代替スタイルシートは閲覧者が選択できるスタイルとして提供されます。rel属性値に alternate stylesheet 値を与え、title 属性をあわせて指定します。

<link rel="stylesheet" href="style.css" />
<link rel="alternate stylesheet" href="style01.css" title="スタイル01" />
<link rel="alternate stylesheet" href="style02.css" title="スタイル02" />

これにより、閲覧者は、ブラウザのメニューなどから、「スタイル01」、「スタイル02」 という代替スタイルを選択することができるようになります。

また、同じ title 属性値を持った優先スタイルシート、代替スタイルシートはグループとして扱われますので、下記のように記述した場合、初期状態で固定スタイルシートと優先スタイルシートのうち 「スタイル01」 が読み込まれ、閲覧者が代替スタイルシート 「スタイル02」 を選択すると、代替スタイルシート 「スタイル02」 と優先スタイルシート 「スタイル02」 が、優先スタイルシート 「スタイル01」 に替わって読み込まれることになります。

<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style01.css" title="スタイル01" />
<link rel="stylesheet" href="style02.css" title="スタイル02" />
<link rel="alternate stylesheet" href="alt-style02.css" title="スタイル02" />

ただし、この仕組みに対応していないブラウザにおいては、優先スタイルシートがすべて初期状態で読み込まれてしまったりと、意図しない動作になる場合がありますので注意が必要です。

link 要素のサンプルソース

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>サンプル</title>
  <link rel="stylesheet" href="css/style.css" />
  <link rel="alternate" type="application/rss+xml" title="フィード" href="feed/" />
  <link rel="apple-touch-icon" href="img/apple-touch-icon.png" />
  <link rel="author" href="author.html" />
  <link rel="icon" type="image/png" href="img/favicon.png" />
  <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
  <link rel="next" title="次の記事" href="new.html" />
  <link rel="prev" title="前の記事" href="old.html" />
 </head>
 <body>

主要ブラウザの対応

IE11 ○
Edge（EdgeHTML） ○
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連する要素

仕様書の該当箇所

用途から目的の要素を探す

用途から HTML 要素を逆引きできます。