link 要素
4.2.4 link 要素
- カテゴリー
- メタデータ・コンテンツ
- この要素を使うことができるコンテキスト:
- メタデータ・コンテンツが期待される場所。
head要素の子となるnoscript要素の中。- コンテンツ・モデル:
- 空
- コンテンツ属性:
- グローバル属性
hrefrelmediahreflangtypesizes- また、
title属性は、この要素では特別なセマンティクスを持ちます。 - DOMインタフェース:
-
interface HTMLLinkElement : HTMLElement { attribute boolean disabled; attribute DOMString href; attribute DOMString rel; 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 属性が存在しなければ、その要素はリンクを定義しないということになります。
(関係性が)指定されたリンクのタイプは rel 属性の値によって与えられます。この属性は、もし存在するなら、スペース区切りトークン・セットとなる値でなければいけません。指定可能な値とその意味は、後述のセクションで定義されています。もし rel 属性がない、または、キーワードがない、または、その値がこの仕様で認められていない形で使われている場合は、該当の要素はリンクを生成しないということになります。
link 要素を使って、2 つのリンクのカテゴリーを生成することができます。それは、外部リソースへのリンクとハイパーリンクです。リンク・タイプのセクションで、指定のリンク・タイプが外部リソースなのかハイパーリンクなのかを定義しています。1 つの link 要素で複数のリンクを生成することができます(いくつかは外部リソースかもしれませんし、いくつかはハイパーリンクかもしれません。)。正確にどのリンクがいくつ生成されるかは、rel 属性に指定されたキーワードに依存します。ユーザーエージェントは、要素ごとではなくリンクごとに処理しなければいけません。
link 要素に対して生成されたリンクは、それぞれ個々に扱われます。例えば、rel="stylesheet" を持った2つの link 要素があったなら、それらはいずれも別々の外部リソースとして見なされ、自身の属性によって別々に作用します。同様に、一つの link 要素が next stylesheet という値となる rel 属性を持っていれば、ハイパーリンク(next キーワード)と外部リソース・リンク(stylesheet キーワード)の両方が生成され、他の属性(media や title など)の影響を別々に受けます。
外部リソースへのリンクに対する正確な挙動は、その関連するリンク・タイプで定義されているとおり、その正確な関係性に依存します。いくつかの属性は、(後述の通り)外部リソースを適用すべきかどうかを制御します。
DOM で表された外部リソース(例えば、スタイルシート)に対して、たとえそのリソースが適用されていなくても、その DOM は利用可能とならなければいけません。そのリソースを取得するために、ユーザーエージェントは、次の手順を実行しなければいけません。
-
href属性の値が空文字列なら、これらの手順を中止します。 -
前の手順に失敗したら、これらの手順を中止します。
ユーザーエージェントは、先を見越して適用されない外部リソースすべてを事前にフェッチせずに、必要になった時点で、このようなリソースを取得するだけにすることもできます。
外部リソースを取得する際には、利用プロトコル(例: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 属性は、a と area 要素の hreflang 属性と同じセマンティクスを持ちます。
type 属性は、リンク先のリソースの MIME タイプを与えます。それは純粋に参考情報でしかありません。その値は、妥当な MIME タイプでなければいけません。
type 属性は、外部リソースのリンクに対して、サポートしていないリソースを取得することを避けることができるよう、ユーザーエージェントにヒントを与えるために使われます。もし、この属性が存在したら、ユーザーエージェントは、そのリソースはその指定されたタイプであると見なさなければけません(たとえ、それが妥当な MIME タイプでなくても。例:空文字列)。もし、この属性が省略され、外部リソースのリンクのタイプが定義済みのデフォルトのタイプを持つなら、ユーザーエージェントは、そのリソースは、そのタイプであると見なさなければいけません。もしユーザーエージェントが、指定されたリンクの関連性に対して、指定の MIME タイプをサポートしていないなら、ユーザーエージェントは、そのリソースを取得すべきではありません。もしユーザーエージェントが指定のリンクの関連性に対して指定された MIME タイプをサポートするなら、ユーザーエージェントは、外部リソースのリンクの特定のタイプに対して指定されたとして、適切な時にそのリソースを取得すべきです。もし、この属性が省略され、外部リソースのリンク・タイプが定義済みのデフォルトのタイプを持たないけれども、ユーザーエージェントがそのタイプを知っておりサポートする場合にそのリソースを取得するようなら、ユーザーエージェントは、それがサポートされるであろうという仮定のもと、そのリソースを取得すべきです。
ユーザーエージェントは、type 属性を信頼できるものと見なしてはいけません。 — リソースをフェッチする上で、ユーザーエージェントは、その実際のタイプを確定するために、type 属性を使ってはいけません。実際のタイプ(次の段落で定義されています)のみが、リソースを適用するかどうかを決定するために使われます。前述の仮のタイプではありません。
外部リソースのリンク・タイプが、そのリソースの Content-Type メタデータを処理する規則を定義しているなら、それらの規則が適用されます。そうでなければ、そのリソースがイメージだと期待されるなら、ユーザーエージェントは、イメージ・スニッフィング規則を適用することができます。そして、それが実際のタイプだったかのように、結果として得られたリソースのタイプを使うことができます。そうでなければ、これらの条件のいずれも適用されなかったか、ユーザーエージェントがイメージ・スニッフィング規則を適用しないのであれば、ユーザーエージェントは、そのリソースの Content-Type メタデータを、そのリソースのタイプを決定するために使わなければいけません。もしタイプのメタデータがなく、外部リソースのリンク・タイプが既定のタイプを持っていれば、ユーザーエージェントは、そのリソースはそのタイプであると見なさなければいけません。
もし外部リソース・リンクのタイプが、そのリソースの Content-Type メタデータの処理規則を定義しているなら、その規則を適用します。そうでなければ、そのリソースが画像だと思われるなら、ユーザーエージェントは、そのリソースの Content-Type メタデータから決定されたタイプを official type として、イメージ・スニッフィング規則を適用することができます。そして、そこから得られた結果を実際のタイプであったかのように使うことができます。そうでなければ、これらの条件のいずれも適用されなかったか、ユーザーエージェントがイメージ・スニッフィング規則を適用しないのであれば、ユーザーエージェントは、そのリソースの Content-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 や他のタイプとして送信されたファイルに対しては、そのスタイルシートを適用しないでしょう。
Content-Type メタデータがなかったり、Content-Type: "null" のように構文的に間違ったタイプで、2つのうち1つが返された場合は、stylesheet リンクに割り当てられているデフォルトのタイプが採用されることになります。とはいっても、そのデフォルトのタイプは text/css なので、そのスタイルシートは適用されるでしょう。
title 属性は、リンクのタイトルを与えます。ひとつだけ例外がありますが、それは純粋に参考情報に過ぎません。その値はテキストです。例外とは、スタイルシートのリンクの場合のことで、この場合は、その title 属性は代替えのスタイルシートのセットを定義します。
link 要素の title 属性は、それが指定されなかった場合に親要素の title を継承しないという点で、他のほとんどの要素に定義されるグローバル属性 title と違います。そのような link 要素は、ただ単に title を持たないだけです。
sizes 属性は、icon リンク・タイプとともに使われます。この属性は、icon キーワードを指定する rel 属性を持たない link 要素で指定することはできません。
HTTP Link: ヘッダーは、もしサポートしているなら、HTTP エンティティ・ヘッダーに指定されている順番で、ドキュメントのあらゆるリンクより前にあると見なさなければいけません。(これらのヘッダーにある URL は、関連の仕様にある規則に従って処理され解決されることになります。本仕様の規則は適用されません。)[HTTP] [WEBLINK]
IDL 属性 href, rel, media, hreflang, type, sizes は、同じ名前の対応するコンテンツ属性を反映しなければいけません。
IDL 属性 disabled は、スタイルシートのリンクに適用するだけです。link 要素がスタイルシートのリンクを定義するとき、disabled 属性は、代替えのスタイルシートの DOM に対して定義されると、作用します。他のすべての link 要素では、常に false を返し、値をセットしても何も作用しません。
LinkStyle インタフェースも、この要素によって実装されなければいけません。スタイリング・プロセッシング・モデルでその方法が定義されています。 [CSSOM]
ここでは、link 要素のセットがいくつかのスタイルシートを提供しています:
<!-- a persistent style sheet --> <link rel="stylesheet" href="default.css"> <!-- the preferred alternate style sheet --> <link rel="stylesheet" href="green.css" title="Green styles"> <!-- some alternate style sheets --> <link rel="alternate stylesheet" href="contrast.css" title="High contrast"> <link rel="alternate stylesheet" href="big.css" title="Big fonts"> <link rel="alternate stylesheet" href="wide.css" title="Wide screen">
次の例は、代替フォーマットを使うページや、他の言語を対象にしたページや、他のメディアを想定したページの指定方法を示しています:
<link rel=alternate href="/en/html" hreflang=en type=text/html title="English HTML"> <link rel=alternate href="/fr/html" hreflang=fr type=text/html title="French HTML"> <link rel=alternate href="/en/html/print" hreflang=en type=text/html media=print title="English HTML (for printing)"> <link rel=alternate href="/fr/html/print" hreflang=fr type=text/html media=print title="French HTML (for printing)"> <link rel=alternate href="/en/pdf" hreflang=en type=application/pdf title="English PDF"> <link rel=alternate href="/fr/pdf" hreflang=fr type=application/pdf title="French PDF">
※ 原文:http://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-link-element