<link> 外部ファイルへのリンクを埋め込む
| 取り扱い | 現行の標準 |
| カテゴリ |
メタデータ・コンテンツitemprop属性が指定された場合、フロー・コンテンツおよびフレージング・コンテンツ |
| 親にできる要素 | メタデータ・コンテンツを受け入れる要素 |
| 子にできる要素 | なし |
| 対応ブラウザ | caniuseで確認 |
<link>タグの説明
<link>は、参照中のドキュメントとは別の場所に置かれた、外部ファイルを読み込むために使用します。
スタイルシートやJavaScriptなど、個別に管理されたソースを再利用する祭に有効です。またファビコンやスマートフォンなどのタブレット型の端末向けに用意したアイコンを読み込むために使われます。
<link>タグの特徴
- この要素は可視化されないため、レイアウトには影響を与えません。
- この要素は空要素です。開始タグのあとに終了タグを記述する必要はありません。
- 読み込ませるファイルに応じて、rel属性の値を最適にして下さい。
<link>に指定できる主な属性
- href="URL"
- 参照するファイルへのURLを指定します。絶対パス、相対パスの両方が使えます。
- rel="リンク先との関係性"
- 参照するソースのリンク種別を指定します。この値には以下のようなものが入ります。
stylesheet：外部スタイルシートicon：アイコンalternate：代替となる文書archives：アーカイブauthor：作者の説明help：ヘルプlicense：ライセンスに関する文書bookmark：ブックマークnext：次の文書prev：前の文書
- as
rel属性の値がpreloadまたはprefetchだった場合に、読み込まれるコンテンツのタイプを指定します。- crossorigin
- リソースの取得に関するCORSリクエストの仕方を定義します。CORSとは「Cross Origin Resource Sharing」の略で、別のドメインに置かれたリソースの扱いに関する内容です。この属性が与えられた場合、その画像ファイルを読み込む時にCORSリクエストが送信されます。
- disabled
rel属性の値がstylesheetの場合に、この属性が設定されていると、リンク先のスタイルシートは読み込まれず、画面には反映されません。この値が削除された時点で、要求に応じてスタイルが反映されます。- hreflang
rel属性の値がhrefの場合に、リンク先のソースの言語を示します。- imagesrcset
<img>や<picture>で使用する画像のファイルセットを、先読みする祭に指定します。この属性はrel属性の値がpreloadかつas属性の値がimageの場合に機能します。- imagesizes
imagesrcset属性で先読みさせるファイルセットに対する適切な表示サイズを指定します。この属性はrel属性の値がpreloadかつas属性の値がimageの場合に機能します。この値は、該当する要素のsizes属性の値と一致させます。- media
- リンク先のソースに適用されるメディアタイプを指定します。
- sizes
- 呼び出されるソースに含まれるアイコンのサイズを指定します。この属性は
rel属性の値iconやapple-touch-iconの場合に有効となります。 - title
- 外部のスタイルシートを読み込む祭に、スタイルシートのグループ名を指定したい場合に使用します。代替スタイルシートを用意し、状況に応じて切り替えたい場合に有効な手段となります。この属性は
rel属性の値がstylesheetの場合に機能します。 - type
- リンク先のMINEタイプを指定します。
<link>の使い方とサンプル
このタグが最も多く使用されるケースは、スタイルシートとファビコンの読み込みです。この記述は世界中の多くのウェブサイトで見ることができます。ぜひウェブサイトを構成する基本的な要素として覚えておきましょう。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
<link rel="next" href="003.html">
<link rel="prev" href="001.html">
<link rel="stylesheet" href="style/main.css">
<link rel="icon" href="../images/favicon.ico">
</head>
<body>
<p>コンテンツ</p>
<div>
<a href="003.html">次のページ</a>
<a href="001.html">前のページ</a>
</div>
</body>
</html>
余談ですが、ファビコンを呼び出すために指定されていたrel属性の shortcut icon という記述は非推奨となりました。今後は shortcut を除外して icon と記述しましょう。
<link>に関連するHTMLタグ
| ヘッダー情報を構成する要素 | |
|---|---|
| <title> | ウェブページのタイトルを指定する |
| <meta> | ドキュメントに関するメタ情報を追加する |
| <link> | 外部ファイルへのリンクを埋め込む |
| <base> | ページの基準となるURLを指定する |
| <style> | スタイルシートをドキュメントの中で指定する |