link 要素

カテゴリー:
メタデータ・コンテント
この要素を使うことができるコンテキスト:
メタデータ・コンテントが期待される場所。
head 要素の子となる noscript 要素の中。
コンテントモデル:
コンテント属性:
グローバル属性
hrefハイパーリンクのアドレス
crossorigin — この要素がクロスオリジン・リクエストを扱う方法
rel — ハイパーリンクを含むドキュメントと、そのリンク先のリソースとの間の関係性
media — 受け入れ可能なメディア
hreflang — リンク先のリソースの言語
type — 参照リソースのタイプに関するヒント
sizes — アイコンのサイズ (rel="icon" の場合)
title 属性は、この要素では特別なセマンティクスを持ちます。リンクのタイトルや代替スタイルシートのセット名になります。
text/html におけるタグの省略:
終了タグはありません。
指定可能な ARIA role 属性 の値:
link (デフォルト - 指定不要).
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性
role 値用
DOM インタフェース:
interface HTMLLinkElement : HTMLElement {
           attribute boolean disabled;
           attribute DOMString href;
           attribute DOMString crossOrigin;
           attribute DOMString rel;
           attribute DOMString rev;
  readonly attribute DOMTokenList relList;
           attribute DOMString media;
           attribute DOMString hreflang;
           attribute DOMString type;
  [PutForwards=value] readonly attribute DOMSettableTokenList sizes;
};
HTMLLinkElement implements LinkStyle;

ウェブ制作者は、link 要素を使って、ドキュメントを他のリソースにリンクすることができます。

リンク先は href 属性によって与えられます。この属性はは必須で、潜在的にスペースで囲まれた空でない妥当な URL を含まなければいけません。href 属性が存在しなければ、この要素はリンクを定義しないということになります。

link 要素は rel 属性を持たなければいけません。

rel 属性が使われるなら、この要素は、head 要素に制限されます。

(関係性を)表すリンクのタイプは rel 属性の値によって与えられます。この属性は、もし存在するなら、スペース区切りトークン・セットとなる値でなければいけません。指定可能な値とその意味は、後述のセクションで定義されています。もし rel 属性がない、または、キーワードがない、または、使われたキーワードがこの仕様で認められていない場合は、該当の要素はリンクを生成しないということになります。

link 要素を使って、2 つのリンクのカテゴリーを生成することができます。それは、外部リソースへのリンクハイパーリンクです。リンクのタイプのセクションで、指定のリンク・タイプが外部リソースなのかハイパーリンクなのかを定義しています。1 つの link 要素で複数のリンクを生成することができます(いくつかは外部リソースかもしれませんし、いくつかはハイパーリンクかもしれません。)。正確にどのリンクがいくつ生成されるかは、rel 属性に指定されたキーワードに依存します。ユーザーエージェントは、要素ごとではなくリンクごとに処理しなければいけません。

link 要素に対して生成されたリンクは、それぞれ別々に扱われます。例えば、rel="stylesheet" を持った2つの link 要素があったなら、それらはいずれも別々の外部リソースとして見なされ、自身の属性によって別々に作用します。同様に、一つの link 要素が next stylesheet という値となる rel 属性を持っていれば、ハイパーリンクnext キーワード)と外部リソースのリンク(stylesheet キーワード)の両方が生成され、他の属性(mediatitle など)の影響を別々に受けます。

たとえば、次の link 要素は(同じページに)2 つのハイパーリンクを生成します:

<link rel="author license" href="/about">

この要素によって生成された 2 つのリンクとは、そのセマンティックが、ターゲットページは現在のページの著者についての情報を持つ、というものと、セマンティクスが、ターゲットページは現在のページが提供されているライセンスに関する情報を持つ、というものです。

crossorigin 属性は CORS 設定属性です。これは外部リソースのリンクに使われることを想定したものです。

外部リソースへのリンクに対する正確な挙動は、その関連するリンクのタイプで定義されているとおり、その正確な関係性に依存します。いくつかの属性は、(後述の通り)外部リソースを適用すべきかどうかを制御します。

DOM の中で表された外部リソース(例えば、スタイルシート)に対して、たとえそのリソースが適用されていなくても、その DOM 表現は利用できるようにしなければいけません(モジュロ・クロスオリジン制約)。ユーザーエージェントは、そのリソースを取得するために、次の手順を実行しなければいけません:

  1. href 属性の値が空文字列なら、これらの手順を中止します。

  2. href 属性によって与えられた URL を、この要素に対して、解決します。

  3. 前の手順に失敗したら、これらの手順を中止します。

  4. 結果として得られた絶対 URL潜在的 CORS 有効フェッチをします。その際に、mode には該当の要素の crossorigin コンテント属性の現在の状態を、origin には該当の link 要素の Documentorigin を使います。そして、default origin behaviourtaint にセットします。

    このように得られたリソースは、CORS-same-origin、または、CORS-cross-origin のいずれかになります。

ユーザーエージェントは、先を見越して適用されないすべて外部リソースを事前にフェッチせずに、必要になった時点で、このようなリソースを取得することもできます。

外部リソースを取得する際には、利用プロトコル(例:HTTP)のセマンティクスに従わなければいけません。(例えば、リダイレクトに従い、レスポンスが 404 だった場合は、その外部リソースを適用しません。)

リソースとクリティカルなサブリソースの取得を試みたら、ユーザーエージェントは、そのロードが成功したらなら、該当の link 要素で load という名前のシンプルなイベントを発出するタスクをキューイングしなければいけません。もし、何かしらの理由(DNS エラー、HTTP 404 レスポンス、 処理終了前のコネクション切断、サポートしていない Content-Type など)で、そのリソースやそのクリティカルなサブリソースのロードが失敗したら、該当の link 要素で error という名前のシンプルなイベントを発出するタスクをキューイングしなければいけません。リソースやそのサブリソースの処理における非ネットワークエラー(CSS パースエラー、PNG デコードエラーなど)は、ここでいうところの失敗にはあたりません。

これらのタスクに対するタスクソースは、DOM マニュピュレーション・タスクソースとなります。

この要素は、そのすべてのリソースとクリティカルなサブリソースの取得の試みが完了するまで、その要素のドキュメントの load イベントを遅延させなければいけません。(リソースが必要となるときまで待機しているなどの理由で、ユーザーエージェントがまだ取得を試みていないリソースは、load イベントを遅延させてはいけません。)


対話型のユーザーエージェントは、ユーザーインタフェースのどこかに、ユーザーが link 要素を使って生成されたハイパーリンクをたどることができる手段を提供することができます。正確なインタフェースはこの仕様で定義しませんが、そのインタフェースには、ドキュメントの各 link 要素で生成されたハイパーリンクごとに、次の情報(再度下記で定義しますが、要素の属性から得られる情報)を、(できる限りシンプルに)何らかの形式で、含めることができるでしょう:

  • 該当のドキュメントとリソースとの関係性(rel 属性で指定されたもの)
  • リソースのタイトル(title 属性で指定されたもの)
  • リソースのアドレス(href 属性で指定されたもの)
  • リソースの言語(hreflang 属性で指定されたもの)
  • リソースの最適なメディア(media 属性で指定されたもの)

ユーザーエージェントは、リソースのタイプ(type 属性で指定されたもの)といった、他の情報を含めることもできます。

link 要素とその rel 属性を使って生成されたハイパーリンクは、ページ全体に適用されます。a 要素と area 要素の rel 属性もリンクのタイプを指し示しますが、そのコンテキストはドキュメント内のリンクのロケーションによって与えられる点が違います。

media 属性は、そのリソースはどのメディアに適用するのか示します。その値は、妥当なメディアクエリでなければいけません。

リンクがハイパーリンクであれば、その media 属性は純粋に参考情報でしかなく、該当のドキュメントがどのメディア向けにデザインさたのかを説明しているに過ぎません。

しかし、もしリンクが外部リソースのリンクなら、その media 属性は考慮すべきものとなります。ユーザーエージェントは、media 属性の値が環境に一致し、かつ、他の関連の条件が当てはまるのであれば、その外部リソースを適用しなければいけません。そうでなければ、それを適用してはいけません。

外部リソースは、その適用性を限定するよう定義された制限をさらに持っているかもしれません。例えば、CSS スタイルシートは @media ブロックを持つかもしれません。この仕様では、そのような追加の制限や要件を無効にすることはしません。

media 属性が省略された場合は "all" がデフォルトになります。これは、すべてのメディアに対してデフォルトでリンクを適用することを意味します。

link 要素の hreflang 属性は、aarea 要素のhreflang 属性と同じセマンティクスを持ちます。

type 属性は、リンク先のリソースの MIME タイプを与えます。それは純粋に参考情報でしかありません。その値は、妥当な MIME タイプでなければいけません。

type 属性は、外部リソースのリンクに対して、サポートしていないリソースを取得することを避けることができるよう、ユーザーエージェントにヒントを与えるために使われます。もし、この属性が存在したら、ユーザーエージェントは、そのリソースはその指定されたタイプであると見なさなければけません(たとえ、それが妥当な MIME タイプでなくても。例:空文字列)。もし、この属性が省略ているものの、外部リソースのリンクのタイプが定義済みのデフォルトのタイプを持つなら、ユーザーエージェントは、そのリソースは、そのタイプであると見なさなければいけません。もしユーザーエージェントが、指定されたリンクの関連性に対して、指定の MIME タイプをサポートしていないなら、ユーザーエージェントは、そのリソースを取得すべきではありません。もしユーザーエージェントが指定のリンクの関連性に対して指定された MIME タイプをサポートするなら、ユーザーエージェントは、その外部リソースのリンクの特定のタイプに対して指定された通りに、適切な時にそのリソースを取得すべきです。もし、この属性が省略され、外部リソースのリンクタイプが定義済みのデフォルトのタイプを持たないけれども、そのタイプが既知のものでサポートされているのであれば、ユーザーエージェントがそのリソースを取得するようなら、ユーザーエージェントは、それがサポートされるであろうという仮定のもと、そのリソースを取得すべきです。

ユーザーエージェントは、type 属性を信頼できるものと見なしてはいけません。 — リソースをフェッチする上で、ユーザーエージェントは、その実際のタイプを確定するために、type 属性を使ってはいけません。実際のタイプ(次の段落で定義されています)のみが、リソースを適用するかどうかを決定するために使われます。前述の仮のタイプではありません。

stylesheet リンクタイプが、そのリソースの Content-Type メタデータを処理する規則を定義しています。

ユーザーエージェントがリソースのタイプを確立したら、ユーザーエージェントは、それがサポートされたタイプで、他の関連の条件が一致するなら、そのリソースを適用しなければいけません。そして、そうでなければ、そのリソースを無視しなければいけません。

ドキュメントが次のように記述されたスタイルシートのリンクを含んでいるなら:

<link rel="stylesheet" href="A" type="text/plain">
<link rel="stylesheet" href="B" type="text/css">
<link rel="stylesheet" href="C">

... この場合、CSS スタイルシートだけをサポートした準拠ブラウザーは、B と C ファイルをフェッチして、A ファイルをスキップするでしょう。(text/plain は、CSS スタイルシートの MIME タイプではないからです)。

ブラウザーは、ファイル B と C に対して、サーバーから返された実際のタイプをチェックするでしょう。ブラウザーは、text/css として送信されたファイルに対して、そのスタイルシートを適用するでしょう。しかし、text/plain や他のタイプとして送信されたファイルに対しては、そのスタイルシートを適用しないでしょう。

2 つのうち 1つが、Content-Type メタデータがなかったり、Content-Type: "null" のように構文的に間違ったタイプだったら、stylesheet リンクに割り当てられているデフォルトのタイプが採用されることになります。とはいっても、そのデフォルトのタイプは text/css なので、そのスタイルシートは適用されるでしょう

title 属性は、リンクのタイトルを与えます。ひとつだけ例外がありますが、それは純粋に参考情報に過ぎません。この値はテキストです。例外とは、スタイルシートのリンクの場合のことで、この場合は、その title 属性は代替スタイルシートのセットを定義します。

link 要素の title 属性は、それが指定されなかった場合に親要素のタイトルを継承しないという点で、他のほとんどの要素に定義されるグローバル属性 title と違います。そのような link 要素は、ただ単にタイトルを持たないだけです。

sizes 属性は、icon リンクタイプとともに使われます。この属性は、icon キーワードを指定する rel 属性を持たない link 要素で指定してはいけません。

ハイパーリンクを生成する link 要素のアクティベーション・ビヘイビアは、次の手順を実行することです:

  1. link 要素の Document完全にアクティブでないなら、これらの手順を中止します。

  2. link 要素によって生成されたハイパーリンクをたどります

HTTP Link: ヘッダーは、もしサポートされているなら、それらが HTTP メッセージの中で与えられた順番で、ドキュメントの中のあらゆるリンクの前に来ると仮定しなければいけません。これらのヘッダーは、関連の仕様で与えられる規則に従って処理されることになります。 [HTTP] [WEBLINK]

HTTP Link: ヘッダーの関連タイプの登録は、HTML のリンクタイプとは違います。そのため、それらのセマンティクスは、同じ名前の HTML タイプとは違うことがあります。

IDL 属性 href, rel, rev, media, hreflang, type, sizes はそれぞれ、同じ名前の対応するコンテント属性を反映しなければいけません。

crossOrigin IDL 属性は、既知の値に限定して、crossorigin コンテント属性を反映しなければいけません。

IDL 属性 relList は、rel コンテント属性を反映しなければいけません。

IDL 属性 disabled は、スタイルシートのリンクに適用するだけです。link 要素がスタイルシートのリンクを定義するとき、disabled 属性は、代替スタイルシートの DOM に対して定義されると、作用します。他のすべての link 要素では、常に false を返し、値をセットしても何も作用しません。

LinkStyle インタフェースも、この要素によって実装されなければいけません。スタイリング処理モデルでその方法が定義されています。 [CSSOM]

ここでは、link 要素のセットがいくつかのスタイルシートを提供しています:

<!-- 固定のスタイルシート -->
<link rel="stylesheet" href="default.css">

<!-- 推奨の代替スタイルシート -->
<link rel="stylesheet" href="green.css" title="緑色のスタイル">

<!-- 他の代替スタイルシート -->
<link rel="alternate stylesheet" href="contrast.css" title="ハイコントラスト">
<link rel="alternate stylesheet" href="big.css" title="大きな文字">
<link rel="alternate stylesheet" href="wide.css" title="ワイドスクリーン">

次の例は、代替フォーマットを使うページや、他の言語を対象にしたページや、他のメディアを想定したページの指定方法を示しています:

<link rel=alternate href="/en/html" hreflang=en type=text/html title="英語のHTML">
<link rel=alternate href="/fr/html" hreflang=fr type=text/html title="フランス語のHTML">
<link rel=alternate href="/en/html/print" hreflang=en type=text/html media=print title="英語のHTML (印刷用)">
<link rel=alternate href="/fr/html/print" hreflang=fr type=text/html media=print title="フランス語のHTML (印刷用)">
<link rel=alternate href="/en/pdf" hreflang=en type=application/pdf title="英語のPDF">
<link rel=alternate href="/fr/pdf" hreflang=fr type=application/pdf title="フランス語のPDF">

※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/document-metadata.html#the-link-element