HTML <link> 要素は、現在の文書と外部のリソースとの関係を明示します。考えられる用途として、ナビゲーションのための関係構造の定義があります。またこの要素は、スタイルシート をリンクするためにもっとも使用されます。

コンテンツカテゴリー メタデータコンテンツ。itemprop 属性を与えた場合は フローコンテンツフレージングコンテンツ
許可された内容 なし。これは 空要素 です。
タグの省略 空要素であるため開始タグは必須であり、終了タグは置いてはいけません。
許可された親要素 メタデータ要素を受け入れるすべての要素。itemprop 属性を与えた場合は フレージングコンテンツ を受け入れるすべての要素。
許可された ARIA ロール なし
DOM インターフェイス HTMLLinkElement

属性

他のすべての要素と同様に、この要素は グローバル属性 を持ちます。

as
この属性は、<link> 要素に rel="preload" を置いた場合に限り使用されます。これは <link> によって読み込まれるコンテンツのタイプを指定する属性であり、コンテンツの優先度づけ、リクエストのマッチング、正しい content security policy の適用、正しい Accept リクエストヘッダーの設定のために必要です。
charset
この属性は、リンク先のリソースの文字エンコーディングを定義します。この値は RFC 2045 で定義されている文字セットの、スペースまたはカンマで区切られたリストです。デフォルトは iso-8859-1 です。
使用上の注意: この属性は廃止されており、ページ作者が使用してはいけません。この属性と同じ効果を得るには、リンク先のリソースで Content-Type: HTTP ヘッダーを使用してください。
crossorigin
この列挙型の属性は、関連リソースを取得する際に CORS を使用しなければならないかを示します。CORS が有効な画像 は、汚染されることなく <canvas> 要素で再利用できます。次の値が使用できます:
"anonymous"
クロスオリジン要求 (Origin: HTTP ヘッダーを持つ要求) が実行されます。ただし、信用情報は送信されません (Cookie、X.509 証明書、HTTP ベーシック認証は利用されません)。サーバーが元のサイトに信用情報を付与しない場合 (Access-Control-Allow-Origin: HTTP ヘッダーの設定なし)、画像が汚染され、その使用も制限されます。
"use-credentials"
クロスオリジン要求 (Origin: HTTP ヘッダーを持つ要求) が実行され、信用情報が送信されます (Cookie、証明書、HTTP ベーシック認証が利用されます)。サーバーが元のサイトに信用情報を付与しない場合 (Access-Control-Allow-Credentials: HTTP ヘッダーに関わらず)、画像が汚染され、その使用も制限されます。
この属性が提供されない場合、リソースは CORS 要求なしで取得され (Origin: HTTP ヘッダーを送信せずに取得)、<canvas> 要素での汚染されない使用が妨げられます。これが無効な場合、列挙型のキーワードに anonymous が指定されたものとして扱われます。追加の情報は CORS 設定属性 を参照してください。
disabled
この属性は、リンクの関係を無効化するために使用します。スクリプトと連携して、さまざまなスタイルシートの関係を有効化・無効化するためにこの属性を使用できます。

注記: HTML 標準に disabled 属性は存在しませんが、HTMLLinkElement DOM オブジェクトに disabled 属性が存在します

HTML の属性として disabled を使用することは非標準であり、一部のブラウザにしか使用されません (W3 #27677)。この属性は使用しないでください。同様の効果を得るには、以下の手法のいずれかを使用してください:

  • ページ上の要素に disabled 属性が直接追加されている場合は、<link> 要素を含めないようにしてください。
  • スクリプトで、StyleSheet DOM オブジェクトの disabled プロパティ を設定してください。
href
この属性は、リンクしたリソースの URL を指定します。URL は絶対・相対のどちらでもかまいません。
hreflang
この属性は、リンク先のリソースの言語を示します。これは単なる助言です。許容される値は BCP47 で定めています。この属性は、href 属性が提供されている場合にのみ使用します。
integrity
この属性は、取得したリソースが予期せぬ改ざんを受けずに提供されたかを、ユーザーエージェントが検証するために使用できるメタデータである、ブラウザーに取得させたリソース (ファイル) の暗号学的ハッシュを BASE64 でエンコードしたデータを含みます。Subresource Integrity をご覧ください。
media
この属性は、リンク先のリソースが適用されるメディアを指定します。この値は メディアクエリー でなければなりません。この属性は主に外部のスタイルシートを、実行中のデバイスに最適なものをユーザーエージェントが選択できるようにリンクするときに役立ちます。
使用上の注意:
  • HTML 4 では、単純なホワイトスペースで区切られたメディアリテラルのリストのみ記述できます。これは メディアタイプとグループ で、printscreenauralbraille などの使用可能な値が定義されています。HTML5 ではこれがあらゆる メディアクエリー に拡張され、HTML 4 で使用できる値の上位互換となっています。
  • CSS3 メディアクエリー をサポートしていないブラウザーは、必ずしもリンクを適切に理解するとは限りません。フォールバックリンクを設定することを忘れないでください。制限されたメディアクエリーのセットは、HTML 4 で定義されています。
methods
この属性の値は、オブジェクト上で動作する関数についての情報を提供します。この値は基本的に HTTP プロトコルが利用されたときに与えられますが、(title 属性と同じような理由で) リンク先の情報を前もって含めるときに役立ちます。例えば定義されたメソッドの機能によって、異なるリンクの描画をブラウザーが選択します。検索可能なリンクで異なるアイコンを取得したり、外部リンクには現在のサイトから去ることを示す描画にしたりできます。この属性は、定義された Internet Explorer 4 ですら、あまり理解されておらずサポートもされていません。Methods プロパティ (MSDN) をご覧ください。
prefetch
この属性は、おそらく次のナビゲーション先で必要でありユーザーエージェントが取得すべきであるリソースを特定します。これは将来リソースが要求されたときに、ユーザーエージェントが早く応答することを可能にします。
referrerpolicy
リソースを読み込む際にどのリファラーを使用するかを示す文字列です:
  • 'no-referrer' は、Referer ヘッダーを送信しないことを表します。
  • 'no-referrer-when-downgrade' は、TLS (HTTPS) を使用せずに生成元へナビゲートする場合は Referer ヘッダーを送信しないことを表します。これは他にポリシーが定められていない場合の、ユーザーエージェントのデフォルトの動作です。
  • 'origin' は、ページの生成元 (大まかにいえばスキーム、ホスト、ポート) をリファラーとすることを表します。
  • 'origin-when-cross-origin' は、異なるオリジンへの移動ではリファラーをスキーム、ホスト、ポートに制限します。同一オリジンへの移動では、リファラーのパスも含めます。
  • 'unsafe-url' は、リファラーに生成元とパスを含めることを表します (ただし、フラグメント、パスワード、ユーザー名は含めません)。これは生成元やパスの情報が TLS で保護されたリソースからセキュアでない生成元へ漏えいしますので、安全ではありません。
rel
この属性は現在の文書に対する、リンクされた文書の関係を示します。属性値は、空白で区切られた リンクタイプ値 のリストでなければなりません。この属性のもっとも一般的な使用法は、外部スタイルシートへのリンクを明示することです。 rel 属性に stylesheet を設定して、href 属性にページを整形する外部スタイルシートの URL を設定します。WebTV は一連の文書の次のページをプリロードするために、rel で値 next の使用もサポートしています。
rev
この属性の値は、href 属性で定義したリンク先文書に対する、現在の文書の関係を示します。従って、この属性は rel 属性の値と比べたときに逆向きの関係を定義します。この属性向けの リンクタイプ値 は、rel 向けの値と似ています。
使用上の注意: この属性は HTML5 で廃止されました。この属性は使用しないでください。同じ効果を得るには、逆の意味の リンクタイプ値 を与えた rel 属性を使用してください。例えば madeauthor に置き換えます。また、この属性はリビジョン (revision) を表すものではなくバージョン番号を指定してはいけませんが、残念ながら多くのサイトでそのように使用されています。
sizes
この属性は、リソースに含まれる映像メディア向けのアイコンのサイズを定義します。これは、relicon リンクタイプ値 である場合にのみ与えなければなりません。以下の値を指定できます:
  • any: image/svg+xml のようなベクター画像であるため、どのようなサイズにも調整可能であることを示します。
  • ホワイトスペースで区切られたサイズのリスト。サイズはそれぞれ <幅のピクセル値>x<高さのピクセル値> または <幅のピクセル値>X<高さのピクセル値> という形式です。それぞれのサイズがリソースに含まれていることが必要です。
使用上の注意:
  • ほとんどのアイコン形式は 1 個のアイコンのみ保存可能です。よってほとんどの場合、sizes はエントリーが 1 個だけになります。アップルの ICN はもちろん、マイクロソフトの ICO 形式も使用できます。ICO の方が一般的であり、こちらを使用するとよいでしょう。
  • Apple の iOS はこの属性をサポートしていないため、Apple の iPhone および iPad は Web Clip やスタートアッププレースホルダとして使用するアイコンを定義するための、特殊な非標準の リンクタイプ値 を使用します。それは apple-touch-icon および apple-touch-startup-icon です。
target
定義されたリンク関係を持つ、またはリンクしたリソースを表示するフレームまたはウィンドウの名前を定義します。
title
title 属性は、<link> 要素では特別な意味があります。<link rel="stylesheet"> で使用すると、優先スタイルシートか代替スタイルシートか を定義します。間違って使用すると スタイルシートが無視されます
type
この属性は、リンク先コンテンツの種類を定義します。この属性の値は text/htmltext/css などの MIME type にします。この属性の一般的な使用法はリンクしたスタイルシートの種類の定義であり、現在もっとも一般的な値は text/css です。これはカスケーディングスタイルシート形式を示します。また rel="preload" リンクタイプで、ブラウザーがサポートするファイルタイプのみダウンロードさせるために使用します。

スタイルシートのインクルード

ページにスタイルシートをインクルードするには、以下の構文を使用します:

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

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

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

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

<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">

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

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

<script>
function sheetLoaded() {
  // Do something interesting; the sheet has been loaded
}

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

<link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()"
  onerror="sheetError()">
注記: load イベントはスタイルシートとスタイルシートがインポートするすべてのコンテンツの読み込みと解析が行われた後、スタイルシートがコンテンツに適用される直前に発生します。

Preload の例

Preloading content with rel="preload" に、<link rel="preload"> の例がいくつかあります。

注記

  • <link> タグは head 要素内または body 要素内 (あるいはその両方) に置くことができます。ただし、body-ok である リンクタイプ を指定しているかに依存します。例えば stylesheet リンクタイプは body-ok であり、<link rel="stylesheet"> を body 要素内に置くことができます。
  • HTML 3.2 では link 要素の属性として hrefrelrevtitle のみ定義しています。
  • HTML 2 では <link> 要素の属性として hrefmethodsrelrevtitleurn のみ定義しています。methods 属性および urn 属性は、後に仕様から削除されました。
  • HTML および XHTML の仕様では <link> 要素向けのイベントハンドラーを定義していますが、それらがどのように使用されるかは不明確です。
  • XHTML 1.0 では <link> のような空要素で、末尾のスラッシュが必要です: <link />

仕様

仕様書 策定状況 コメント
Preload 草案 <link rel="preload"> および as 属性を定義。
Subresource Integrity
<script> の定義
勧告 integrity 属性を追加。
HTML Living Standard
<link> の定義
現行の標準 最新のスナップショットから変更なし。
HTML5
<link> の定義
勧告 crossorigin 属性および sizes 属性を追加。media の値をすべてのメディアクエリーに拡張。rel に多くの新たな値を追加。
HTML 4.01 Specification
<link> の定義
勧告  
Resource Hints
prefetch の定義
草案 dns-prefetchpreconnectprefetchprerender を追加。

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本サポート1.0 (有り)1.0 (有り) (有り) (有り)
charset1.0 (有り)1.0 (有り) (有り) (有り)
crossorigin25.0 無し18.0 無し15.0 ?
disabled 無し (有り) 無し (有り) 無し 無し
href1.0 (有り)1.0 (有り) (有り) (有り)
hreflang1.0 (有り)1.0 (有り) (有り) (有り)
integrity45.0 無し ? 無し ? 無し
media1.0 (有り)1.0 (有り) (有り) (有り)
methods 無し ? 無し4.0 無し 無し
prefetch56.0 ? ? 無し43.0 ?
referrerpolicy58.0 無し50.0 ? ? ?
rel1.0 (有り)1.0 (有り) (有り) (有り)
rev1.0 (有り)1.0 (有り) (有り) (有り)
sizes 無し 無し 無し1 無し 無し 無し
target1.0 (有り)1.0 (有り) (有り) (有り)
title1.0 (有り)1.0 (有り) (有り) (有り)
type1.0 (有り)1.0 (有り) (有り) (有り)
機能AndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
基本サポート (有り) (有り) (有り)1.0 (有り) (有り) (有り)
charset (有り) (有り) (有り)1.0 (有り) (有り) (有り)
crossorigin ? (有り) 無し18.0 無し ? ?
disabled 無し 無し (有り) 無し ? 無し 無し
href (有り) (有り) (有り)1.0 (有り) (有り) (有り)
hreflang (有り) (有り) (有り)1.0 (有り) (有り) (有り)
integrity45.045.0 無し ? 無し ? 無し
media (有り) (有り) (有り)1.0 (有り) (有り) (有り)
methods 無し 無し ? 無し4.0 無し 無し
prefetch56.056.0 ? ? 無し43.0 ?
referrerpolicy58.058.0 無し50.0 ? ? ?
rel (有り) (有り) (有り)1.0 (有り) (有り) (有り)
rev (有り) (有り) (有り)1.0 (有り) (有り) (有り)
sizes 無し 無し 無し 無し1 無し 無し 無し
target (有り) (有り) (有り)1.0 (有り) (有り) (有り)
title (有り) (有り) (有り)1.0 (有り) (有り) (有り)
type (有り) (有り) (有り)1.0 (有り) (有り) (有り)

1. See bug 441770.

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss, takahashim
 最終更新者: yyss,