<link>: 外部リソースへのリンク要素
=====================

**`<link>`** は HTML の要素で、現在の文書と外部のリソースとの関係を指定します。
 この要素はスタイルシートへのリンクに最もよく使用されますが、サイトのアイコン（"favicon" スタイルのアイコンと、モバイル端末のホーム画面やアプリのアイコンの両方）の確立や、その他のことにも使用されます。

試してみましょう
--------

外部スタイルシートへリンクするには、 `<head>` の中に次のような `<link>` 要素を入れてください。


```html
<link href="main.css" rel="stylesheet" />
```


この単純な例では、`href` 属性内にスタイルシートへのパスを提供し、`rel` 属性の値を `stylesheet` にしています。`rel` は "relationship" を意味し、おそらく `<link>` 要素の重要な機能の一つです。 — 値はこれを含んでいる文書にどのように関係するかを示します。

他にも見かけるであろう他の一般的な種別はたくさんあります。例えば、サイトのファビコンへのリンクがあります。


```html
<link rel="icon" href="favicon.ico" />
```


他にもアイコンの `rel` 値はいくつもあり、以下のように主に様々なモバイルプラットフォーム上で特殊なアイコンの種別を示すために使用されます。


```html
<link
 rel="apple-touch-icon-precomposed"
 sizes="114x114"
 href="apple-icon-114.png"
 type="image/png" />
```


`sizes` 属性はアイコンの寸法を表し、 `type` はリンクされようとしているリソースの MIME タイプが入ります。これらはブラウザーが利用できる最も適切なアイコンを選択するための有益なヒントを提供します。

`media` 属性でメディア種別やクエリーを指定することもできます。このリソースはメディアの条件が真になった場合のみ読み込まれます。


```html
<link href="print.css" rel="stylesheet" media="print" />
<link
 href="mobile.css"
 rel="stylesheet"
 media="screen and (max-width: 600px)" />
```


`<link>` 要素には、興味深いパフォーマンスやセキュリティの機能もいくつか追加されています。以下の例を見てみましょう。


```html
<link
 rel="preload"
 href="myFont.woff2"
 as="font"
 type="font/woff2"
 crossorigin="anonymous" />
```


`rel` が `preload` の値であることは、ブラウザーがこのリソースを先読みすることを指示しており (詳しくは rel="preload" によるコンテンツの先読みを参照)、 `as` 属性がコンテンツが読み込まれるされる特定のクラスを示します。
 `crossorigin` 属性はリソースが CORS リクエストによって読み込まれるかどうかを示します。

その他の使い方のメモです。

* `<link>` 要素はリンク種別が **body-ok** であるかどうかによって、 `<head>` 要素または `<body>` 要素のどちらかに置くことができます。例えば `stylesheet` リンク種別は body-ok であり、`<link rel="stylesheet">` を body 要素内に置くことができます。しかし、これは従うべき良い方法ではありません。 `<link>` 要素は `<head>` に入れて本文から離した方が分かりやすくなります。
* サイトにファビコンを設定するために `<link>` を使用する場合で、サイトがセキュリティの強化のためにコンテンツセキュリティポリシー (CSP) を使用している場合、ファビコンにポリシーが適用されます。ファビコンが読み込まれないという問題が発生したら、 `Content-Security-Policy` ヘッダーの `img-src` ディレクティブがアクセスを禁止していないかどうか確認してください。
* HTML および XHTML の仕様では `<link>` 要素向けのイベントハンドラーを定義していますが、それらがどのように使用されるかは不明確です。
* XHTML 1.0 では `<link>` のような空要素では、 `<link />` のように末尾のスラッシュが必要です。
* WebTV は `rel` に `next` の値を使用して、一連の文書の次のページを先読みすることに対応しています。
属性
--

この要素にはグローバル属性があります。

`as`

 この属性は、 `rel="preload"` または `rel="prefetch"` を `<link>` 要素に設定した場合に限り使用されます。
 これは `<link>` によって読み込まれるコンテンツのタイプを指定する属性であり、リクエストの照合、正しいコンテンツセキュリティポリシーの適用、正しい `Accept` リクエストヘッダーの設定のために必要です。
 さらに、 `rel="preload"` はこれをリクエストの優先度付の信号として使用します。下記の表はこの属性に有効な値と、適用先の要素またはリソースの一覧です。


| 値 | 適用先 |
| --- | --- |
| audio | `<audio>` 要素 |
| document | `<iframe>` および `<frame>` 要素 |
| embed | `<embed>` 要素 |
| fetch | fetch, XHR

**Note:** この値では `<link>` に crossorigin 属性が付いたものが必要です。
 |
| font | CSS @font-face |
| image | `<img>` および `<picture>` 要素で srcset または imageset 属性が付いているもの、 SVG の `<image>` 属性、 CSS の `*-image` ルール |
| object | `<object>` 属性 |
| script | `<script>` 要素、ワーカーの `importScripts` |
| style | `<link rel=stylesheet>` 要素、 CSS の
 `@import` |
| track | `<track>` 要素 |
| video | `<video>` 要素 |
| worker | ワーカー、共有ワーカー |

`crossorigin`

列挙型の属性で、関連リソースを取得する際に CORS を使用しなければならないかを示します。
 CORS が有効な画像は、*汚染*されることなく `<canvas>` 要素で再利用できます。次の値が使用できます。


`anonymous`

 オリジン間リクエスト (つまり、 HTTP の `Origin` ヘッダーを持つリクエスト) が実行されます。ただし、信用情報は送信されません (Cookie、X.509 証明書、 HTTP ベーシック認証は利用されません)。
 サーバーが元のサイトに信用情報を付与しない (HTTP の `Access-Control-Allow-Origin` ヘッダーの設定がない) 場合、リソースが汚染され、その使用も制限されます。


`use-credentials`

 オリジン間リクエスト (つまり、 HTTP の `Origin` ヘッダーを持つリクエスト) が実行され、信用情報が送信されます (Cookie、証明書、HTTP ベーシック認証が利用されます)。
 サーバーが元のサイトに信用情報を付与しない場合 (HTTP の `Access-Control-Allow-Credentials` ヘッダーに関わらず)、画像が*汚染*され、その使用も制限されます。



 この属性が存在しない場合、リソースは CORS リクエストなしで (`Origin` HTTP ヘッダーを送信せずに) 取得され、汚染されない使用が妨げられます。これが無効な場合、列挙型のキーワード **anonymous** が指定されたものとして扱われます。
 それ以上の情報は CORS 設定属性 を参照してください。


`disabled` 
Non-standard

`rel="stylesheet"` の場合のみ、 `disabled` は論理属性であり、指定されたスタイルシートを読み込んで文書に適用するかどうかを示します。 `disabled` が HTML に読み込み時点で指定されていた場合、そのスタイルシートはページ読み込み処理の間に読み込まれません。代わりに、そのスタイルシートは `disabled` 属性が `false` に変更されたか削除された場合にオンデマンドで読み込まれます。

DOM から `disabled` プロパティの値を変更すると、そのスタイルシートを文書の `Document.styleSheets` の一覧から削除します。

`fetchpriority` 
Experimental

先読みされたリソースを取得する際に使用する相対的な優先度のヒントを 提供します。使用できる値は次の通りです。

`high`

同じ型を持つ他のリソースと比較して、優先度の高い取り込みを示します。

`low`

同じ型の他のリソースと比較して、優先順位が低い取り込みを示します。

`auto`

既定値。同じ型の他のリソースに対するフェッチ優先順位を自動的に決定することを示します。


`href`

この属性は、リンクしたリソースの URL を指定します。 URL は絶対・相対のどちらでもかまいません。

`hreflang`

 この属性は、リンク先のリソースの言語を示します。
 これは単なる助言です。
 許容される値は RFC 5646: Tags for Identifying Languages (also known as BCP 47) で定めています。
 この属性は、`href` 属性が提供されている場合にのみ使用します。


`imagesizes`

`rel="preload"` および `as="image"` において、 `imagesizes` 属性は、`img` 要素によって使用される適切なリソースを、その `srcset` および `sizes` 属性に対応する値で先読みすることを示す sizes 属性です。

`imagesrcset`

`rel="preload"` および `as="image"` において、 `imagesrcset` 属性は `img` 要素によって使用される適切なリソースを、その `srcset` および `sizes` 属性に対応する値で先読みすることを示す sourceset 属性です。

`integrity` 
Experimental

この属性は、取得したリソースが予期せぬ改ざんを受けずに提供されたかを、ユーザーエージェントが検証するために使用できるメタデータである、ブラウザーに取得させたリソース (ファイル) の暗号学的ハッシュを BASE64 でエンコードしたデータを含みます。サブリソース完全性をご覧ください。

`media`

この属性は、リンク先のリソースが適用されるメディアを指定します。この値はメディアクエリーでなければなりません。この属性は主に外部のスタイルシートから、実行中のデバイスに最適なものをユーザーエージェントが選択できるようにリンクするときに役立ちます。

**メモ:**

* HTML 4 では、単純なホワイトスペースで区切られたメディアリテラルのリストのみ記述できます。これはメディア種別とグループ で、`print`, `screen`, `aural`, `braille` などの使用可能な値が定義されています。
 HTML5 ではこれがあらゆるメディアクエリーに拡張され、 HTML 4 で使用できる値の上位互換となっています。
* CSS3 メディアクエリーに対応していないブラウザーは、リンクを適切に理解するとは限りません。 HTML 4 で定義されたメディアクエリーのセットに制限されるので、フォールバックリンクを設定することを忘れないでください。

`prefetch` 安全なコンテキスト用 
Experimental

この属性は、おそらく次のナビゲーション先で必要でありユーザーエージェントが取得すべきであるリソースを特定します。これは将来リソースがリクエストされたときに、ユーザーエージェントが早く応答することを可能にします。

`referrerpolicy` 
Experimental

リソースを読み込む際にどのリファラーを使用するかを示す文字列です。

* `no-referrer` は、`Referer` ヘッダーを送信しないことを表します。
* `no-referrer-when-downgrade` は、TLS (HTTPS) を使用せずにオリジンへナビゲートする場合は `Referer` ヘッダーを送信しないことを表します。これは他にポリシーが定められていない場合の、ユーザーエージェントの既定の動作です。
* `origin` は、ページのオリジン (大まかにいえばスキーム、ホスト、ポート) をリファラーとすることを表します。
* `origin-when-cross-origin` は、異なるオリジンへの移動ではリファラーをスキーム、ホスト、ポートに制限します。同一オリジンへの移動では、リファラーのパスも含めます。
* `unsafe-url` は、リファラーにオリジンとパスを含めることを表します (ただし、フラグメント、パスワード、ユーザー名は含めません)。これはオリジンやパスの情報が TLS で保護されたリソースからセキュアでないオリジンへ漏えいしますので、安全ではありません。

`rel`

この属性は現在の文書に対する、リンクされた文書の関係を示します。属性値は、空白で区切られたリンク種別の値のリストでなければなりません。

`sizes` 
Experimental

この属性は、リソースに含まれる映像メディア向けのアイコンのサイズを定義します。これは、 `rel` の値が `icon` または Apple の `apple-touch-icon` のような標準外の種別が含まれている場合にのみ指定することができます。以下の値を指定できます。

* `any`: `image/svg+xml` のようなベクター画像であるため、どのようなサイズにも調整可能であることを示します。
* ホワイトスペースで区切られたサイズのリスト。サイズはそれぞれ `<幅のピクセル数>x<高さのピクセル数>` または `<幅のピクセル数>X<高さのピクセル数>` という形式です。それぞれのサイズがリソースに含まれていることが必要です。

**メモ:** ほとんどのアイコン形式は 1 個のアイコンのみ保存可能です。よってほとんどの場合、 `sizes` 属性はエントリーが 1 個だけになります。
 アップルの ICN はもちろん、マイクロソフトの ICO 形式も使用できます。 ICO の方が一般的であり、複数ブラウザーの対応 (特に IE の古いバージョン) が重要である場合はこの形式を使用してください。


`title`

`title` 属性は、`<link>` 要素では特別な意味があります。`<link rel="stylesheet">` で使用すると、優先スタイルシートか代替スタイルシートか を定義します。

`type`

 この属性は、リンク先コンテンツの種類を定義します。この属性の値は **text/html** や **text/css** などの MIME タイプにします。
 この属性の一般的な使用法は、参照されるスタイルシートのタイプ（**text/css** など）の定義ですが、 CSS はウェブ上の唯一のスタイルシート言語であるため、`type` 属性を省略できるばかりでなく、それが実際に推奨される習慣になっています。
 また `rel="preload"` リンク種別で、ブラウザーが対応するファイルタイプのみダウンロードさせるためにも使用します。


`blocking` 
Experimental

この属性は、外部リソースの読み取り時に特定の処理をブロックすべきであることを明示的に示します。ブロックされる操作は、下記のブロック属性をスペースで区切った一覧でなければなりません。

* `render`: 画面に描画するコンテンツがブロックされます。

### 標準外の属性

`methods` 
Non-standard

非推奨

 この属性の値は、オブジェクト上で動作する関数についての情報を提供します。
 この値は基本的に HTTP プロトコルが利用されたときに与えられますが、(**title** 属性と同じような理由で) リンク先の情報を前もって含めるときに役立ちます。
 例えば定義されたメソッドの機能によって、異なるリンクの描画をブラウザーが選択します。
 検索可能なリンクで異なるアイコンを取得したり、外部リンクには現在のサイトから去ることを示す描画にしたりできます。
 この属性は、定義された Internet Explorer 4 ですら、あまり理解されておらず対応もされていません。


`target` 
非推奨

定義されたリンク関係を持つ、またはリンクしたリソースを表示するフレームまたはウィンドウの名前を定義します。

### 廃止された属性

`charset` 
非推奨

 この属性は、リンク先のリソースの文字エンコーディングを定義します。この値は RFC 2045 で定義されている文字セットの、スペースまたはカンマで区切られたリストです。
 既定値は `iso-8859-1` です。


**メモ:** この廃止された属性と同じ効果を生み出すためには、リンク先のリソースで HTTP の `Content-Type` ヘッダーを使用してください。

`rev` 
非推奨

 この属性の値は、`href` 属性で定義したリンク先文書に対する、現在の文書の関係を示します。
 従って、この属性は `rel` 属性の値と比べたときに逆向きの関係を定義します。
 この属性向けのリンク種別の値は、`rel` 向けの値と似ています。


**メモ:** 代わりに、逆の意味のリンク種別の値を与えた `rel` 属性を使用してください。例えば `made` は `author` に置き換えます。また、この属性は「リビジョン」 (revision) を表すものではないので、バージョン番号を指定してはいけませんが、残念ながらいくつものサイトでそのように使用されています。

例
-

### スタイルシートの読み込み

ページにスタイルシートを読み込むには、以下の構文を使用します。


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

### 代替スタイルシートの提供

代替スタイルシートも提示できます。

 ユーザーはメニューの **表示 > スタイルシート** で、使用するスタイルシートを選択できます。
 これは、ユーザーがページをさまざまなバージョンで閲覧する手段を提供します。


```html
<link href="default.css" rel="stylesheet" title="Default Style" />
<link href="fancy.css" rel="alternate stylesheet" title="Fancy" />
<link href="basic.css" rel="alternate stylesheet" title="Basic" />
```

### 異なる利用場面のアイコンの提供

同じページにいくつかの異なるアイコンへのリンクを含めて、ブラウザーが `rel` や `sizes` の値をヒントとして使用し、特定の場面で最適に動作する一つを選択するようにすることができます。


```html
<!-- 高解像度ディスプレイの第 3 世代 iPad -->
<link
 rel="apple-touch-icon-precomposed"
 sizes="144x144"
 href="favicon144.png" />
<!-- 高解像度ディスプレイの iPhone -->
<link
 rel="apple-touch-icon-precomposed"
 sizes="114x114"
 href="favicon114.png" />
<!-- 第 1、第 2 世代の iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png" />
<!-- 高解像度でない iPhone, iPod Touch, Android 2.1 以降の端末 -->
<link rel="apple-touch-icon-precomposed" href="favicon57.png" />
<!-- 基本的なファビコン -->
<link rel="icon" href="favicon32.png" />
```

### メディアクエリーのついた条件付きのリソース読み込み

以下のように、メディア種別やクエリーを `media` 属性で指定することができます。このリソースはメディア条件が真の場合にのみ読み込まれます。


```html
<link href="print.css" rel="stylesheet" media="print" />
<link href="mobile.css" rel="stylesheet" media="all" />
<link
 href="desktop.css"
 rel="stylesheet"
 media="screen and (min-width: 600px)" />
<link
 href="highres.css"
 rel="stylesheet"
 media="screen and (min-resolution: 300dpi)" />
```

### スタイルシートの load イベント

`load` イベントの発生を確認することで、スタイルシートが読み込まれた時を判断できます。同様に `error` イベントを確認することで、スタイルシートを処理する際のエラー発生を検出できます。


```html
<script>
 const stylesheet = document.querySelector("#my-stylesheet");

 stylesheet.onload = () => {
 // Do something interesting; the sheet has been loaded
 };

 stylesheet.onerror = () => {
 console.log("An error occurred loading the stylesheet!");
 };
</script>

<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet" />
```


**メモ:** `load` イベントはスタイルシートとスタイルシートがインポートするすべてのコンテンツの読み込みと解析が行われた後、スタイルシートがコンテンツに適用される直前に発生します。

### 先読みの例

`<link rel="preload">` の例は、 `rel="preload"` によるコンテンツの先読みにいくつかあります。

### リソースが読み込まれるまで描画をブロック

`render` トークンを `blocking` 属性に設定することができます。
 指定すると、リソースが取り込まれるまでページのレンダリングがブロックされます。


```html
<link blocking="render" href="critical-font.woff2" as="font" />
```

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | 
 メタデータコンテンツ。
 `itemprop` が存在する場合は、フローコンテンツおよび記述コンテンツ。
  |
| 許可されている内容 | なし。これは空要素です。 |
| タグの省略 | 空要素であるため開始タグは必須であり、終了タグは置いてはいけません。 |
| 許可されている親要素 | 
 メタデータ要素を受け入れるすべての要素。
 itemprop 属性がある場合は記述コンテンツを受け入れるすべての要素。
  |
| 暗黙の ARIA ロール | `href` 属性つきの `link` |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLLinkElement` |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-link-element |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* HTTP の `Link` ヘッダー