<link>
link（リンク）要素は文書を他の外部リソースと関連付けます。タイルシートだけでなく、外部リソースと文書を関連付けることができます。対応しているブラウザでは、この link 要素を使用してナビゲーションリンクを表示したりすることもできます。
| link要素 | 説明 |
|---|---|
| カテゴリー | メタデータコンテンツ |
| コンテンツモデル | 空 |
| 使用できる場所 | ・メタデータコンテンツが期待される場所 ・head要素の子要素であるnonscriptの子要素として ・body内で利用できる場合は、フレージングコンテンツが期待される場所 |
link要素で使用できる属性
| 属性名 | 属性値 | 説明 |
|---|---|---|
| グローバル | 使用要素による | すべての要素で使用できる属性 |
| href | URI | リンク先のURLを指定。 |
| rel | 現在の文書から見たリンク先の関係 | 半角スペース区切りで複数指定可能。 |
| media | メディアクエリ mediaに指定できるメディア名については、下のmedia属性に指定できるメディア名を参照ください。 | リンク先のファイル（CSSなど）を適用するメディア。 |
| hreflang | 言語コード（ja、enなど） | リンク先文章の記述言語 |
| type | MIMEタイプ type属性に指定できるMIMEタイプについては、下のMIMEタイプを参照ください。 | リンク先のMIMEタイプ |
| sizes | ・link 要素における sizes 属性 link 要素における sizes 属性は rel=”icon” あるいは rel=”apple-touch-icon”が指定された link 要素でのみ使用できます。値は 「横幅x高さ」 の形式、例えば 16×16 のように指定します。 16X16 のように 「x」 は大文字でも構いません。 また、値は半角スペースで区切ることで複数指定することもできます。例えばマルチアイコンのように、1つのファイルに複数サイズの画像が含まれているような場合に各サイズを表すことができます。 ・img 要素、source 要素における sizes 属性 img 要素、source 要素 における sizes 属性で指定できる値は下記のルールで示されます。 ・下記の各組をカンマ区切りで 1個以上 1.下記の組み合わせが 0組以上（両方の場合は空白文字で区切って記述） 1.メディアクエリ 2.画像の表示サイズ値 2.画像の表示サイズ値 ・もしくは auto | rel=”icon”の場合のアイコンのサイズ |
| crossorigin | CORS （Cross-Origin Resource Sharing / クロスドメイン通信） 設定属性です。 | サードパーティ （元の文書とは異なるオリジン） から読み込んだ画像などのリソースを利用する際のルールを指定します。 |
| integrity | ハッシュ値を指定 | サブリソース完全性（SRI）機能を用いて、取得したリソースが予期せず改竄されていないかをユーザエージェントが検証するためのハッシュ値を指定します。 |
| referrerpolicy | リファラポリシーを指定 | リンク先にアクセスする際、あるいは画像など外部リソースをリクエストする際にリファラ（アクセス元の URL 情報）を送信するか否か（リファラポリシー）を指定します。 |
| imagesrcset | URL 画像の横幅w,URL 画像の横幅w,… URL デバイスピクセル比x,URL デバイスピクセル比x,… | ビューポートの横幅ごとの表示する画像のURL デバイスピクセル比ごとの表示する画像のURL |
| imagesizes | 長さ | 画像の表示サイズの横幅 |
| メディアクエリ 長さ、メディアクエリ 長さ、…、長さ | メディア条件ごとの画像の表示サイズの横幅 | |
| as | link 要素に rel="preload" または rel="prefetch" が指定された場合にのみ使用可能です。 | link 要素によって読み込まれるコンテンツの種類を指定します。 |
| blocking | link要素に rel="modulepreload"、rel="preload"、rel="stylesheet" が指定された場合にのみ使用可能です。 | 要素が潜在的にレンダリングブロッキングであるかどうかを指定します。 |
| color | link 要素において、rel="mask-icon" が指定された場合にのみ有効な属性です。 | ブラウザがピン止め機能で使用する色を指定します。 |
| disabled | link 要素に rel="stylesheet" が指定された場合にのみ使用可能です。 | link 要素が無効であるかどうかを指定します。 |
文章を外部スタイルシートと関連付ける
使用例
<link rel="stylesheet" href="style.css">Webサイトのアイコンを指定する
<link rel=”icon”>
使用例
<link rel="icon" type="image/png" href="imgfavicon.png">
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
<link rel="apple-touch-icon" type="image/png" href="img/apple-touch-icon.png">