<link>タグは、文書から外部リソースにリンクする際に使用します。 外部リソースとは、スタイルシートを記述した外部CSSファイルなど、その文書に関連する何らかのリソース(手助けとなる資源)です。
link要素には、少なくともhref属性かimagesrcset属性のいずれかが必要です。 href属性とimagesrcset属性の両方が存在しないlink要素はリンクを定義しません。
link要素には、rel属性かitemprop属性のいずれかを含める必要がありますが、両方を含めることはできません。
以下は、典型的なlink要素の使用例です。 link要素は、外部CSSファイルの読み込みや、アイコンファイルの読み込みによく使用されます。 (apple-touch-iconは拡張機能ですが、 アップル社のサービスなどで利用される場面も多いため、現実的には重要なキーワードと言えるかもしれません。)
<!doctype html>
<html>
<head>
<title>link要素の使用例</title>
<link rel="stylesheet" href="default.css">
<link rel="stylesheet" href="green.css" title="グリーンスタイル">
<link rel="icon" href="favicon.ico">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
</head>
<body>
<p>link要素のrel属性とhref属性を使って、文書に外部CSSファイルとアイコンファイルを読み込んでいます。</p>
</body>
</html>
link要素は、ひとつの文書内に複数指定できます。 例えば、rel="stylesheet" を持つ複数のlink要素がある場合、 それらはそれぞれ別の外部リソースとしてカウントされ、それぞれが独自の属性の影響を受けます。 文書からリンクしている複数の外部CSSファイルのスタイル指定は、すべて有効となります。
href属性には、リンク先のアドレスとして有効なURLを指定します。
rel属性には、キーワードでリンクのタイプ(関係)を指定します。 キーワードには、スタイルシートであることを表すstylesheetや、アイコンであることを表すiconなどが定義されています。
itemprop属性には、その要素に関するマイクロデータ(詳細情報)を指定します。 これは、検索エンジンのクローラーなどに詳細情報を提供することで、 文書内容を解析しやすくすることを目的としています。
type属性には、ユーザー エージェントへのヒントとして MIMEタイプ(例 text/plain、text/html、text/css、application/pdf、image/bmp、video/ogg など)を指定します。 type属性の値に適切なMIMEタイプを指定しておくことで、外部ファイルの種類が正しく認識されて誤作動が起きにくくなるでしょう。
title属性には、リンクのタイトルを指定します。 title属性は様々な要素で使用できる汎用的な属性ですが、 link要素のtitle属性にスタイルシートのセット名を指定すると、スタイルの名称としてブラウザなどで利用されることがあります。
他にも、外部リソースが適用されるメディアを指定するmedia属性、 外部リソースの言語を指定するhreflang属性、 rel="icon" の場合にアイコンのサイズを指定するsizes属性などが用意されています。
以下は、メディアタイプとして定義されていますが、非推奨となっています。 可能ならば、使用を避けた方が良いでしょう。
以下のサンプルでは、link要素のrel属性の値にpreloadを指定して、適切なリソースをプリロード(先読み)しています。 プリロードされたリソースは、後でimg要素によって使用されますが、img要素のsrcset属性とsize属性に対応する値を持っています。
<!-- imagesrcset属性があるのでhref属性は省略しています -->
<link rel="preload" as="image"
imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
imagesizes="50vw">
<!-- 後で動的に画像リソースが挿入されます -->
<img src="wolf.jpg" alt="美しい狼"
srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
sizes="50vw">
以下のサンプルでは、link要素の imagesrcset属性 と media属性 を組み合わせて、画面の横幅に応じた適切なリソースをプリロード(先読み)しています。 プリロードされたリソースは、後でpicture要素で画面の横幅に応じて使用されます。
<!-- link要素のmagesrcset属性をmedia属性と組み合わせています -->
<link rel="preload" as="image"
imagesrcset="dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x"
media="(max-width: 800px)">
<link rel="preload" as="image"
imagesrcset="dog-wide-1x.jpg, dog-wide-2x.jpg 2x"
media="(min-width: 801px)">
<!-- 後で動的に画像リソースが挿入されます -->
<picture>
<source srcset="dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x"
media="(max-width: 800px)">
<img src="dog-wide-1x.jpg" srcset="dog-wide-2x.jpg 2x"
alt="すごい犬">
</picture>
以下のサンプルでは、link要素のdisabled属性を指定することで、デフォルトではスタイルシートの読み込みを無効にしています。
document.querySelector("link").removeAttribute("disabled")
などのコードによってdisabled属性を動的に削除することで代替スタイルシートが適用されます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
body {background-color:#ccccff;}
</style>
<link disabled rel="alternate stylesheet" href="alt1.css" title="代替スタイルシート">
<title>基本スタイルシートと代替スタイルシート</title>
<script>
function buttonClick(){
document.querySelector("link").removeAttribute("disabled");
}
</script>
</head>
<body>
<p>スタイルシートを切り替えることができます。</p>
<input type="button" value="スタイル切替" onclick="buttonClick()">
</body>
</html>
以下のサンプルは、type属性にMIMEタイプを指定した例と、type属性によるMIMEタイプ指定を省略した例です。 どちらも誤りではありません。 CSSスタイルシートのデフォルトタイプは text/css ですから、type属性によるMIMEタイプの指定を省略してもスタイルシートは適用されます。
<link rel="stylesheet" href="styleA.css" type="text/css">
<link rel="stylesheet" href="styleB.css">