link要素

いまさらHTML,CSS講座 > HTML5 > link要素 - ドキュメント・メタデータ -

link要素は、そのドキュメントを他のリソースにリンクすることができます。

href属性

href属性はリンクの宛先を指定します。href属性は必須の属性で、値にはURLが含まれている必要があります。 href属性が存在しない場合、その要素は、リンクを定義していないことになります。また、HTML5より空のURLを持つことはできなくなりました。

rel属性

rel属性はリンクのタイプ（関係）を指定します。rel属性は必須の属性で、値はset of space-separated tokensの文字列のキーワードです。rel属性が存在しない場合はキーワードも存在しないことになります。また、使用されるキーワードが、仕様書で許可されていない場合、要素はすべてのリンクを作成することができません。許可されたキーワードとその概要は以下の一覧です。

なお、rel属性が使用される場合、要素の配置は、head要素の内容に限定されます。また、rel属性とハイパーリンクはページ全体に適用されます。

許可されたキーワード

alternate（ハイパーリンク）
現在のドキュメントの代替表現を指定します。
author（ハイパーリンク）
現在のドキュメントまたは記事の作成者へのリンクを指定します。
help（ハイパーリンク）
コンテキストに対応するヘルプへのリンクを指定します。
icon（外部リソースへのリンク）
現在のドキュメントを表すアイコンをインポートします。
license（ハイパーリンク）
著作権、ライセンスのドキュメントへのリンクを指定します。
next（ハイパーリンク）
シリーズの次のドキュメントへのリンクを指定します。
prefetch（外部リソースへのリンク）
キャッシュにダウンロードする画像やCSSなどのリソースファイルを指定します。
prev（ハイパーリンク）
シリーズの前のドキュメントへのリンクを指定します。
search（ハイパーリンク）
現在のドキュメントと、関連するページを検索するために使用できるリソースへのリンクを指定します。
stylesheet（外部リソースへのリンク）
スタイルシートをインポートします。

リンクカテゴリ

外部リソースへのリンク
自動的にユーザー・エージェントによって処理され、現在のドキュメントを補強するために使用されるリソースへのリンクです。

ハイパーリンク
ユーザエージェントによってユーザに提供されている他のリソースへのリンクです。例えば、ユーザーがユーザー・エージェントで訪問したり、ダウンロードするなどそれらのリソースにナビゲートすることができるリンクなど。

例）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<link rel="stylesheet" href="ファイル名.css">
<script src="ファイル名.js"></script>
<title></title>
</head>
<body>

</body>
</html>

また、1つのlink要素は、複数のリンクを作成することができます。指定したそれぞれのリンクは別々に処理されます。例えば、rel属性のキーワードであるauthorとlicenseのリンク先（href属性の値）が同じページである場合などです。

以下の例では、ターゲットのページ（about.html）は、現在のページの作者についての情報（author）と、ライセンスに関する情報（license）を持っているというセマンティックになります。

例）

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

crossorigin属性

CORS設定属性（CORS settings attribute）です。この属性は外部リソースへのリンクで使用することを目的としています。

media属性

リソースが適用されるメディアを表します。値は、有効なメディアクエリを指定します。

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

hreflang属性

リンクされたリソースの言語を表します。値は、ja、enなどBCP47言語タグを指定します。

type属性

リンクされたリソースのMIMEタイプを表します。値は、text/htmlや、text/cssなどMIMEタイプを指定します。

title属性

リンクのタイトルを表します。値は、テキストです。なお、代替スタイルシートをユーザーに提供している場合は、スタイルシートの切り替えに対応しているユーザー・エージェントのスタイルシートの切り替えタブなどに表示されます。

例）

<link rel="stylesheet" href="standard.css" title="標準">
<link rel="stylesheet" href="priority.css" title="優先">
<link rel="stylesheet" href="substitute.css" title="代替">

上記のスタイルシートをセットしたHTMLファイルはこちら。　,　Internet Explorer10での切り替えのキャプチャはこちら。

sizes属性

iconリンクタイプで使用される属性です。視覚形式のアイコンのサイズを与え、値は16x16のように、横（半角英数字）x（ローマ字のエックス）縦（半角英数字）の形式で指定します。x は大文字、小文字どちらでも構いません。なお、この属性はiconのキーワードを指定するrel属性を持っていないlink要素に指定することはできません。

カテゴリ: メタデータ・コンテンツ。
要素を使用することができる場所: メタデータ・コンテンツが使用できる場所。head要素の子であるnoscript要素の内容として。
コンテンツモデル（内容に含めることのできる要素）: 空
コンテンツ属性: グローバル属性、href属性、rel属性、crossorigin属性、media属性、hreflang属性、type属性、sizes属性。また、title属性はこの要素では、リンクのタイトル、代替スタイルシートの設定名といった特別なセマンティックを持ちます。

この要素に追加された属性: sizes属性。
この要素で変更があった属性: href属性、media属性。
この要素で廃止された属性: rev属性、charset属性、target属性。