HTML <link> 要素は、現在の文書と外部のリソースとの関係を明示します。考えられる用途として、ナビゲーションのための関係構造の定義があります。またこの要素は、スタイルシートをリンクするためにもっとも使用されます。
{{htmlattrxref("rel", "link")}} にさまざまな値を指定できます。これらはの一覧は別のページに掲載しています。
| コンテンツカテゴリ | メタデータコンテンツ。{{htmlattrxref("itemprop", "link")}} 属性を与えた場合はフローコンテンツ、フレージングコンテンツ。 |
|---|---|
| 許可された内容 | なし。これは{{Glossary("empty element", "空要素")}}です。 |
| タグの省略 | 空要素であるため開始タグは必須であり、終了タグは置いてはいけません。 |
| 許可された親要素 | メタデータ要素を受け入れるすべての要素。{{htmlattrxref("itemprop", "link")}} 属性を与えた場合はフレージングコンテンツを受け入れるすべての要素。 |
| DOM インターフェイス | {{domxref("HTMLLinkElement")}} |
属性
他のすべての要素と同様に、この要素はグローバル属性を持ちます。
- {{htmlattrdef("charset")}}{{obsolete_inline}}
- この属性は、リンク先のリソースの文字エンコーディングを定義します。この値は {{rfc(2045)}} で定義されている文字セットの、スペースまたはカンマで区切られたリストです。デフォルトは
iso-8859-1です。使用上の注意: この属性は廃止されており、ページ作者が使用してはいけません。この属性と同じ効果を得るには、リンク先のリソースでContent-Type: HTTP ヘッダを使用してください。 - {{htmlattrdef("crossorigin")}}
- この列挙型の属性は、関連画像を取得する際に CORS を使用しなければならないかを示します。CORS が有効な画像は、汚染されることなく {{HTMLElement("canvas")}} 要素で再利用できます。次の値が使用できます:
"anonymous"- クロスオリジン要求 (
Origin:HTTP ヘッダを持つ要求) が実行されます。ただし、信用情報は送信されません (Cookie、X.509 証明書、HTTP ベーシック認証は利用されません)。サーバが元のサイトに信用情報を付与しない場合 (Access-Control-Allow-Origin:HTTP ヘッダの設定なし)、画像が汚染され、その使用も制限されます。 "use-credentials"- クロスオリジン要求 (
Origin:HTTP ヘッダを持つ要求) が実行され、信用情報が送信されます (Cookie、証明書、HTTP ベーシック認証が利用されます)。サーバが元のサイトに信用情報を付与しない場合 (Access-Control-Allow-Credentials:HTTP ヘッダに関わらず)、画像が汚染され、その使用も制限されます。
Origin:HTTP ヘッダを送信せずに取得)、{{HTMLElement('canvas')}} 要素での汚染されない使用が妨げられます。これが無効な場合、列挙型のキーワードに anonymous が指定されたものとして扱われます。追加の情報は CORS 設定属性を参照してください。 - {{htmlattrdef("disabled")}} {{Non-standard_inline}}
- この属性は、リンクの関係を無効化するために使用します。スクリプトと連携して、さまざまなスタイルシートの関係を有効化・無効化するためにこの属性を使用できます。
注記: HTML 標準に
disabled属性は存在しませんが、HTMLLinkElementDOM オブジェクトにdisabled属性が存在します。HTML の属性として
disabledを使用することは非標準であり、一部のブラウザにしか使用されません (W3 #27677)。この属性は使用しないでください。同様の効果を得るには、以下の手法のいずれかを使用してください:- ページ上の要素に
disabled属性が直接追加されている場合は、{{HTMLElement("link")}} 要素を含めないようにしてください。 - スクリプトで、
StyleSheetDOM オブジェクトのdisabledプロパティ を設定してください。
- ページ上の要素に
- {{htmlattrdef("href")}}
- この属性は、リンクしたリソースの {{glossary("URL")}} を指定します。URL は絶対・相対のどちらでもかまいません。
- {{htmlattrdef("hreflang")}}
- この属性は、リンク先のリソースの言語を示します。これは単なる助言です。許容される値は BCP47 で定めています。この属性は、{{htmlattrxref("href", "link")}} 属性が提供されている場合にのみ使用します。
- {{htmlattrdef("integrity")}} {{experimental_inline}}
- この属性は、取得したリソースが予期せぬ改ざんを受けずに提供されたかを、ユーザエージェントが検証するために使用できるメタデータを含みます。Subresource Integrity をご覧ください。
- {{htmlattrdef("media")}}
- この属性は、リンク先のリソースが適用されるメディアを指定します。この値はメディアクエリでなければなりません。この属性は主に外部のスタイルシートを、実行中のデバイスに最適なものをユーザエージェントが選択できるようにリンクするときに役立ちます。
使用上の注意:
- HTML 4 では、単純なホワイトスペースで区切られたメディアリテラルのリストのみ記述できます。これはメディアタイプとグループで、
print、screen、aural、brailleなどの使用可能な値が定義されています。HTML5 ではこれがあらゆるメディアクエリに拡張され、HTML 4 で使用できる値の上位互換となっています。 - CSS3 メディアクエリをサポートしていないブラウザは、必ずしもリンクを適切に理解するとは限りません。フォールバックリンクを設定することを忘れないでください。制限されたメディアクエリのセットは、HTML 4 で定義されています。
- HTML 4 では、単純なホワイトスペースで区切られたメディアリテラルのリストのみ記述できます。これはメディアタイプとグループで、
- {{htmlattrdef("methods")}} {{Non-standard_inline}}
- この属性の値は、オブジェクト上で動作する関数についての情報を提供します。この値は基本的に HTTP プロトコルが利用されたときに与えられますが、(title 属性と同じような理由で) リンク先の情報を前もって含めるときに役立ちます。例えば定義されたメソッドの機能によって、異なるリンクの描画をブラウザが選択します。検索可能なリンクで異なるアイコンを取得したり、外部リンクには現在のサイトから去ることを示す描画にしたりできます。この属性は、定義された Internet Explorer 4 ですら、あまり理解されておらずサポートもされていません。Methods プロパティ (MSDN) をご覧ください。
- {{htmlattrdef("rel")}}
- この属性は現在の文書に対する、リンクされた文書の関係を示します。属性値は、空白で区切られたリンクタイプ値のリストでなければなりません。この属性のもっとも一般的な使用法は、外部スタイルシートへのリンクを明示することです。 rel 属性に
stylesheetを設定して、href 属性にページを整形する外部スタイルシートの URL を設定します。WebTV は一連の文書の次のページをプリロードするために、rel で値nextの使用もサポートしています。 - {{htmlattrdef("rev")}}{{obsolete_inline}}
- この属性の値は、{{htmlattrxref("href", "link")}} 属性で定義したリンク先文書に対する、現在の文書の関係を示します。従って、この属性は rel 属性の値と比べたときに逆向きの関係を定義します。この属性向けのリンクタイプ値は、{{htmlattrxref("rel", "link")}} 向けの値と似ています。
使用上の注意: この属性は HTML5 で廃止されました。この属性は使用しないでください。同じ効果を得るには、逆の意味のリンクタイプ値を与えた {{htmlattrxref("rel", "link")}} 属性を使用してください。例えば
madeはauthorに置き換えます。また、この属性は{{原語併記("リビジョン", "revision")}} を表すものではなくバージョン番号を指定してはいけませんが、残念ながら多くのサイトでそのように使用されています。 - {{htmlattrdef("sizes")}}
- この属性は、リソースに含まれる映像メディア向けのアイコンのサイズを定義します。これは、{{htmlattrxref("rel","link")}} が
iconリンクタイプ値である場合にのみ与えなければなりません。以下の値を指定できます:any:image/svg+xmlのようなベクター画像であるため、どのようなサイズにも調整可能であることを示します。- ホワイトスペースで区切られたサイズのリスト。サイズはそれぞれ
<幅のピクセル値>x<高さのピクセル値>または<幅のピクセル値>X<高さのピクセル値>という形式です。それぞれのサイズがリソースに含まれていることが必要です。
使用上の注意:- ほとんどのアイコン形式は 1 個のアイコンのみ保存可能です。よってほとんどの場合、{{htmlattrxref("sizes")}} はエントリが 1 個だけになります。アップルの ICN はもちろん、マイクロソフトの ICO 形式も使用できます。ICO の方が一般的であり、こちらを使用するとよいでしょう。
- Apple の iOS はこの属性をサポートしていないため、Apple の iPhone および iPad は Web Clip やスタートアッププレースホルダとして使用するアイコンを定義するための、特殊な非標準のリンクタイプ値を使用します。それは
apple-touch-iconおよびapple-touch-startup-iconです。
- {{htmlattrdef("target")}}{{Non-standard_inline}}
- 定義されたリンク関係を持つ、またはリンクしたリソースを表示するフレームまたはウィンドウの名前を定義します。
- {{htmlattrdef("type")}}
- この属性は、リンク先コンテンツの種類を定義します。この属性の値は text/html や text/css などの MIME type にします。この属性の一般的な使用法はリンクしたスタイルシートの種類の定義であり、現在もっとも一般的な値は text/css です。これはカスケーディングスタイルシート形式を示します。
例
スタイルシートのインクルード
ページにスタイルシートをインクルードするには、以下の構文を使用します:
<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() {
alert("An error occurred loading the stylesheet!");
}
</script>
<link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()">
注記:
load イベントはスタイルシートとスタイルシートがインポートするすべてのコンテンツの読み込みと解析が行われた後、スタイルシートがコンテンツに適用される直前に発生します。注記
<link>タグは head 要素内にのみ置けます。ただし、<link>は複数置くことができます。- HTML 3.2 では link 要素の属性として href、rel、rev、title のみ定義しています。
- HTML 2 では
<link>要素の属性として href、methods、rel、rev、title、urn のみ定義しています。methods 属性および urn 属性は、後に仕様から削除されました。 - HTML および XHTML の仕様では
<link>要素向けのイベントハンドラを定義していますが、それらがどのように使用されるかは不明確です。 - XHTML 1.0 では
<link>のような空要素で、末尾のスラッシュが必要です:<link />
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| {{SpecName('Subresource Integrity', '#htmlscriptelement', '<script>')}} | {{Spec2('Subresource Integrity')}} | integrity 属性を追加。 |
| {{SpecName('HTML WHATWG', 'semantics.html#the-link-element', '<link>')}} | {{Spec2('HTML WHATWG')}} | 最新のスナップショットから変更なし。 |
| {{SpecName('HTML5 W3C', 'document-metadata.html#the-link-element', '<link>')}} | {{Spec2('HTML5 W3C')}} | crossorigin 属性および sizes 属性を追加。media の値をすべてのメディアクエリに拡張。rel に多くの新たな値を追加。 |
| {{SpecName('HTML4.01', 'struct/links.html#h-12.3', '<link>')}} | {{Spec2('HTML4.01')}} |
ブラウザ実装状況
{{CompatibilityTable}}
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | 1.0 | {{CompatGeckoDesktop("1.0")}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
| 代替スタイルシート | {{CompatUnknown}} | {{CompatGeckoDesktop("1.9")}} | {{CompatUnknown}} | {{CompatVersionUnknown}} | {{CompatUnknown}} |
disabled 属性 {{Non-standard_inline}} |
{{CompatNo}} | {{CompatNo}} | {{CompatVersionUnknown}} | {{CompatNo}} | {{CompatNo}} |
methods 属性 {{Non-standard_inline}} |
{{CompatNo}} | {{CompatNo}} | 4.0 | {{CompatNo}} | {{CompatNo}} |
sizes 属性 |
{{CompatNo}} | {{CompatNo}} {{bug("441770")}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
load および error イベント |
19 (Webkit: 535.23) ({{webkitbug(38995)}}) |
{{CompatGeckoDesktop("9.0")}} | {{CompatUnknown}} | 11.60 | {{CompatUnknown}} |
crossorigin 属性 |
{{CompatChrome("25")}} | {{CompatGeckoDesktop("18.0")}} | {{CompatUnknown}} | {{CompatOpera("15")}} | {{CompatUnknown}} |
integrity 属性 |
{{CompatChrome(45.0)}} | {{CompatNo}}[1] |
| 機能 | Android | Android Webview | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|
| 基本サポート | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatGeckoMobile("1.0")}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
| 代替スタイルシート | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatGeckoMobile("2.0")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
disabled 属性 {{Non-standard_inline}} |
{{CompatNo}} | {{CompatUnknown}} | {{CompatNo}} | {{CompatUnknown}} | {{CompatNo}} | {{CompatNo}} | {{CompatUnknown}} |
methods 属性 {{Non-standard_inline}} |
{{CompatNo}} | {{CompatUnknown}} | {{CompatNo}} | 4.0 | {{CompatNo}} | {{CompatNo}} | {{CompatUnknown}} |
sizes 属性 |
{{CompatNo}} | {{CompatUnknown}} | {{CompatNo}} {{bug("441770")}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatUnknown}} |
load および error イベント |
{{CompatUnknown}} | {{CompatUnknown}} | {{CompatGeckoMobile("9.0")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
crossorigin 属性 |
{{CompatUnknown}} | {{CompatUnknown}} | {{CompatGeckoMobile("18.0")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
integrity 属性 |
{{CompatNo}} | {{CompatChrome(45.0)}} | {{CompatChrome(45.0)}} |
[1] WebKit の Subresource Integrity 実装は {{WebKitBug(148363)}} で追跡しています (integrity 属性を含む)。
関連情報
{{HTMLRef}}