linkタグ
linkは、外部リソースを指定するするタグです。
解説
外部CSSファイルなどの外部リソースを使いたいときにlinkタグで指定して読み込みます。
linkタグは、HTML文章のhead領域内に指定します。
コンテンツ・モデル
| カテゴリー （自カテゴリー） | メタデータ・コンテンツ |
| コンテキスト （親カテゴリー） | メタデータ・コンテンツを許可する場所 |
| コンテンツ・モデル （子カテゴリー） | なし |
属性
linkタグには以下の属性が指定できます。
| 属性 | 説明 |
|---|---|
| rel | 外部リソースファイルの種類を指定する（必須属性） （例）rel="stylesheet" ※設定できる値の一例です。 stylesheet：外部CSSファイルを指定する icon、shortcut icon：ファビコンファイルを指定する index：現ページの索引を指定する next：１つ先のページのURLを指定する prev：１つ前のページのURLを指定する author：現ページの作者ページのURLを指定する license：現ページの著作権に関するページURLを指定する apple-touch-icon：スマホ用アイコン画像を指定する |
| href | 外部リソースのパスを指定する（必須属性） （例）href="common.css" |
| type | 外部リソースのMIMEタイプを指定する （例）type="image/png" |
サンプル
外部スタイルシートを読み込む
<link rel="stylesheet" href="common.css">
ファビコンを設定する（ico画像）
<link rel="icon" href="favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
どちらの書き方でもOKです。
ファビコンを設定する（png画像）
<link rel="icon" type="image/png" href="favicon.png">
スマホ用のアイコンを設定する
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
次のページ（nextpage.html）と前のページ（prevpage.html）を設定する
<link rel="next" href="nextpage.html">
<link rel="prev" href="prevpage.html">
ページの前後関係を明示的に示したい場合に使用します。
備考
- 外部リソースに指定できるとされるものにはいくつかありますが、普段使用されるのは stylesheet ぐらいです。
関連項目
- head：HTML文章のヘッダ情報を表す
