<link>
<link> は HTML の要素で、現在の文書と外部のリソースとの関係を指定します。 この要素はスタイルシートへのリンクに最もよく使用されますが、サイトのアイコン（"favicon" スタイルのアイコンと、モバイル端末のホーム画面やアプリのアイコンの両方）の確立や、その他のことにも使用されます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | ≤4 | 18 | ≤3.2 | |
| HTML 属性 | ||||||
as | 50 | 17 | 56 | 10 | 50 | 10 |
| crossorigin 属性は、audio, img, link, script, video の各要素で有効です。CORS への対応を提供し、したがって要素が読み取るデータのために CORS リクエストの構成を有効にします。要素によっては、属性は CORS 設定属性になります。 | 34 | 17 | 18 | 10 | 34 | 10 |
disabled | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
href | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
hreflang | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| サブリソース完全性 (Subresource Integrity, SRI) は、（CDN などから）取得したリソースが意図せず改ざんされていないかをブラウザーが検証するセキュリティ機能です。 SRI を利用する際には、取得したリソースのハッシュ値と一致すべきハッシュ値を指定します。 | 45 | 17 | 43 | 11.1 | 45 | 11.3 |
media | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| rel 属性は、リンク先のリソースと現在の文書との関係を定義します。 link、a、area、form で有効で、対応する値は属性が見つかった要素に依存します。 | 1 | 12 | 1 | 1 | 18 | 1 |
sizes | 15 | 79 | 31 | 6 | 18 | 6 |
type | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| DOM API | ||||||
| HTMLLinkElement インターフェイスは、外部リソースの参照情報と、それらのリソースと文書の関係（またはその逆）を表します（ 要素に対応します。 HTMLAnchorElement で表される 要素と混同しないでください）。このオブジェクトは HTMLElement インターフェイスのすべてのプロパティとメソッドを継承します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| as は HTMLLinkElement インターフェイスのプロパティで、 HTML リンクによって読み込まれるコンテンツの種類を表す文字列として、 "script", "style", "image", "video", "audio", "track", "font", "fetch" のいずれかを返します。 | 50 | 17 | 56 | 10 | 50 | 10 |
| HTMLLinkElement インターフェイスの crossOrigin プロパティは、リソースを取得するときに使用する Cross-Origin Resource Sharing (CORS) 設定を指定します。 | 34 | 17 | 18 | 10 | 34 | 10 |
| HTMLLinkElement インターフェースの disabled プロパティは、リンクが無効かどうかを表すブール値です。スタイルシートリンク（relプロパティがstylesheetに設定されている）でのみ効果があります。 | 1 | 12 | 1 | 1 | 18 | 1 |
| HTMLLinkElement インターフェースの href プロパティには、リンクに関連付けられた URL を表す文字列が格納されます。 | 1 | 12 | 1 | 1 | 18 | 1 |
| HTMLLinkElementインターフェイスのhreflangプロパティは、ページの言語と地理的なターゲットを示すために使用されます。このヒントは、ブラウザがより適切なページを選択したり、SEOを改善するために使用できます。 | 1 | 12 | 1 | 1 | 18 | 1 |
| HTMLLinkElementインターフェイスのintegrityプロパティは、ブラウザがフェッチされたリソースが予期せぬ操作なしに配信されたことを確認するために使用できるインラインメタデータを含む文字列です。 | 45 | 17 | 43 | 11.1 | 45 | 11.3 |
| HTMLLinkElement インターフェイスの media プロパティは、リソースが適用される一つ以上のメディア形式のリストを表す文字列です。 | 1 | 12 | 1 | 1 | 18 | 1 |
| HTMLLinkElement.rel プロパティは rel 属性を反映します。これは、空白で区切られたリンク種別のリストの入った文字列であり、link 要素で表されるリソースと現在の文書との関係を示します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| HTMLLinkElement.relList は読み取り専用プロパティで、rel 属性を反映します。 これは生きた DOMTokenList で、link 要素で表されるリソースと現在のドキュメントの間の関係を示すリンク種別のセットが入ります。 | 50 | 17 | 30 | 9 | 50 | 9 |
| HTMLLinkElementインターフェイスの読み込み専用の sizesプロパティは、リソースに含まれるビジュアルメディアのアイコンのサイズを定義する。これは link 要素の sizes 属性を反映したもので、空白で区切られたサイズのリストをとり、それぞれ x またはキーワード any の形式で指定します。 | 15 | 79 | 31 | 6 | 18 | 6 |
| HTMLLinkElement インターフェースの type プロパティは、リンク先のリソースの MIME タイプを表す文字列です。 | 1 | 12 | 1 | 1 | 18 | 1 |
- Firefox 83 より前のバージョンでは、`rel="icon"` に対して `crossorigin` はサポートされていません。
- Chromeやその他のBlinkベースのブラウザでは、JavaScriptを使用して`disabled`属性を追加しても、`document.styleSheets`からスタイルシートが削除されません。
- Edge 79以降、JavaScriptを使用して`disabled`属性を追加しても、スタイルシートは`document.styleSheets`から削除されません。
- Chrome Android やその他の Blink ベースのブラウザでは、JavaScript を使用して `disabled` 属性を追加しても、スタイルシートは `document.styleSheets` から削除されません。
- Chromeやその他のBlinkベースのブラウザでは、JavaScriptを使用して`disabled`属性を追加しても、`document.styleSheets`からスタイルシートが削除されません。
- Edge 79以降、JavaScriptを使用して`disabled`属性を追加しても、スタイルシートは`document.styleSheets`から削除されません。
- Chrome Android やその他の Blink ベースのブラウザでは、JavaScript を使用して `disabled` 属性を追加しても、スタイルシートは `document.styleSheets` から削除されません。
- Chrome 50 以前では、このプロパティは `DOMTokenList` ではなく、非推奨の子プロパティ `DOMSettableTokenList` を返していました。
- Chrome Android 50 以前は、このプロパティは `DOMTokenList` ではなく、非推奨の子プロパティ `DOMSettableTokenList` を返していました。
基本構文
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="canonical" href="https://example.com/page">ライブデモ
Common link relations
Use a table to compare the main rel values used in the document head.
Head resource links
Show how link elements usually connect a document to external metadata or resources.
実務での使いどころ
-
<link> の活用
<link> は HTML の要素で、現在の文書と外部のリソースとの関係を指定します。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。