link要素とは

link要素では、各属性を使って、現在の文書と別の文書とのリンク（繋がり）を示す。外部リソースとの関係を指定するのだ。

link要素が一番使われるケースは、外部CSSの読み込みとショートカットアイコンの読み込みだが、他にも、言語によってHTMLファイルを切り替える、または、ナビゲーションの為の、文書間の関係構造の定義などの使い方もある。

HTML5での分類: Metadataコンテンツ
子要素にできるもの: なし; コンテンツを持たない空要素で、終了タグがない。

指定できる属性

href属性: href="URL"; リンク先ドキュメントのURLを指定する。絶対パスと相対パスどちらでも使用できる。; link要素においてhref属性は必須。
rel属性: rel="リンクタイプ"; rel属性でリンクタイプを指定することにより、ドキュメント間の関係を設定できる。; 半角スペースで区切って複数のリンクタイプを指定可能。; link要素においてrel属性は必須。
media属性: media="メディアタイプ"; リンク先ドキュメントが適用されるメディアの種類をメディアタイプ（メディアクエリ）で指定。「,（カンマ）」で区切って複数の指定が可能。; 省略時の値は「all」。
hreflang属性: hreflang="言語タグ"; リンク先ドキュメントの言語を言語タグ名で指定。
type属性: type="MIMEタイプ"; リンク先ドキュメントのファイルの種類をMIMEタイプで指定。
sizes属性: sizes="値"; rel属性のリンクタイプで「icon」を指定した場合にのみ使用できる。; アイコンのサイズを「画像幅x画像の高さ」をピクセル値で指定するか、キーワード「any」（SVGなど拡張可能な画像の場合）を指定。; 半角スペースで区切って複数のサイズを指定可能。
title属性: title="文字列"; リンクのタイトルを指定する。; 外部スタイルシートを読み込むlink要素においては、スタイルシートのグループ名という特別な意味を持つ。
rev属性: HTML5で廃止になり、HTML5.1 で復活した属性。; rel属性と逆のリバースリンクの関係をリンクタイプで示す。
crossorigin属性: HTML5.1で登場した属性。; CORS（クロスドメイン通信）設定属性。サードパーティ（元の文書とは異なるオリジン）から読み込んだ画像などのリソースを利用する際のルールを指定する。
グローバル属性: グローバル属性参照。

link要素によって設定されたハイパーリンクとrel属性は、ページ全体に適用される。

link要素の記述

<link href="URL" rel="リンクタイプ" 属性="値">

link要素は、Metadataコンテンツの記述箇所、またはhead要素内のnoscript要素内で使用できる。いずれにせよ、head要素内に記述する要素である。

noscript要素は、JavaScriptを使えないブラウザ（使わないように設定しているブラウザ）の為の代替の指定をする要素。

link要素の記述例

現在のドキュメントにとっての、href属性で指定したURLの外部ファイルとの関係をrel属性で示すことになる。

<link rel="stylesheet" href="sample.css" type="text/css">
<link rel="stylesheet" href="sample.css">

外部ファイル「sample.css」は、現在のドキュメントにとって「stylesheet（スタイルシート）」であることを示している。

ブラウザには外部ファイルのタイプをチェックする機能があるので、type属性の値は単なる参考程度。

「rel="stylesheet"」の場合、デフォルトのMIMEタイプは「text/css」なので、「type="text/css"」を省略しても構わない。

link要素は複数記述できる

link要素は複数使用できる。1つのlink要素に対して読み込むことのできる外部ファイルは1つなので、読み込む外部ファイルが複数ある場合はlink要素もその分必要になる。

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
<link rel="icon" href="sampleicon.png" sizes="16x16" type="image/png">
<link rel="help" href="help.html">
<link rel="next" href="next.html">
</head>
<body>
コンテンツ
</body>
</html>

link要素で指定できる主なリンクタイプ

rel属性の値にリンクタイプを指定することで、文書と文書との関係性を示すことができる。

大文字と小文字は区別されない。

alternate: 現在文書の代替表現を示す。
author: 現在文書の著者情報の文書を示す。
help: ヘルプの文書を示す。
icon: 現在文書を表すアイコンをインポートする。
license: 現在文書の著作権情報を示す。
next: 一連の文書の中で、現在文書の次の文書を示す。
prefetch: 先読みすべき外部リソースを示す。
prev: 一連の文書の中で、現在文書の前の文書を示す。
search: 現在文書の関連文書を検索する為のページを示す。
stylesheet: 外部スタイルシートを示す。