link要素|HTML5|on Note

link要素で文書間の関係を示す

on Note

link要素で指定できる属性

ウェブ制作者は、link要素を使用して、現在の文書と外部リソースとをリンクすることができる。

現在の文書は、href属性で指定したURLの外部リソースと、rel属性で指定したような繋がりがある、ということをlink要素で示すことになる。よって、外部リソースのURLを指定するhref属性と、文書間の関係を示すrel属性は省略できない

href属性
href="URL"
リンク先ドキュメントのURLを指定する。絶対パスと相対パスどちらでも使用できる。
link要素において、href属性は必須。href属性が存在しなければ、この要素はリンクを定義しないということになる。
rel属性
rel="リンクタイプ"
rel属性でリンクタイプを指定することにより、ドキュメント間の関係を設定できる。
半角スペースで区切って複数のリンクタイプを指定できる。
link要素において、rel属性は必須。
media属性
media="メディアタイプ"
リンク先ドキュメントが適用されるメディアの種類をメディアタイプ(メディアクエリ)で指定。「,(カンマ)」で区切って複数の指定が可能。
初期値は「all」。
hreflang属性
hreflang="言語タグ"
リンク先ドキュメントの言語を示す。値は言語タグ名で指定する。
例えば、日本語のページから英語のページにリンクする場合、リンク先が英語で書かれていることをブラウザや閲覧者に伝える。
type属性
type="MIMEタイプ"
リンク先ドキュメントのファイルの種類を「text/html」や「text/plain」、スタイルシートを示す「text/css」などMIMEタイプで指定する。
HTML以外の外部ファイルを指定する時、type属性の値に適切なMIMEタイプを指定することで、外部ファイルの種類が正しく認識され誤作動の回避が期待できる。
MIMEタイプを間違えて記述していた場合はブラウザに無視される。
sizes属性
sizes="値"
rel属性のリンクタイプで「icon」を指定した場合にのみ使用できる。
アイコンのサイズを「数値(画像幅をピクセル値で)x(大文字または小文字の「x」)数値(画像の高さをピクセル値で)」で指定するか、キーワード「any」(SVGなど拡張可能な画像の場合)を指定。
半角スペースで区切って複数のサイズを指定可能。
title属性
title="文字列"
リンクのタイトルを指定する。
rel属性でスタイルシートを指定した場合のみ、title属性の値を使って「代替スタイルシートセット」(ユーザの操作などによって選択的に表示可能なスタイル一覧)を定義できる。外部スタイルシートを読み込むlink要素においては、スタイルシートのグループ名という特別な意味を持つ。
rev属性
HTML5で廃止になり、HTML5.1 で復活した属性。
rel属性と逆のリバースリンクの関係をリンクタイプで示す。
crossorigin属性
HTML5.1で登場した属性。
CORS(クロスドメイン通信)設定属性。サードパーティ(元の文書とは異なるオリジン)から読み込んだ画像などのリソースを利用する際のルールを指定する。
グローバル属性
グローバル属性参照。

link要素によって設定されたハイパーリンクとrel属性は、ページ全体に適用される。一方、a要素とarea要素で設定されたハイパーリンクとrel属性の設定は、ドキュメント内のリンクの位置に対応している。

rel属性

link要素はrel属性を持たなければならず、rel属性が使われるということは、この要素の存在はhead要素内に制限される。

どんな関係性かを示すリンクタイプはrel属性の値によって与えられる。もしrel属性がない、またはキーワードがない、または使われたキーワードがこの仕様で認められていない場合は、link要素はリンクを生成しないということになる。

link要素を使って、外部リソースへのリンクとハイパーリンク、2つのリンクのカテゴリを生成することができる。そのlink要素のリンクが外部リソースなのかハイパーリンクなのかは、指定するリンクタイプによって定義されている。

また、1つのlink要素で複数のリンクを生成することができる。いくつかは外部リソースかも知れないしいくつかはハイパーリンクかも知れないが、どのリンクがいくつ生成されるかは、rel属性に指定されたキーワードに依存する。UAは、要素ごとではなくリンクごとに処理するべきである。

メニュー