HTML5タグ虎の巻

linkタグ

linkは、外部リソースを指定するするタグです。

解説

外部CSSファイルなどの外部リソースを使いたいときにlinkタグで指定して読み込みます。
linkタグは、HTML文章のhead領域内に指定します。

コンテンツ・モデル

カテゴリー
(自カテゴリー)
メタデータ・コンテンツ
コンテキスト
(親カテゴリー)
メタデータ・コンテンツを許可する場所
コンテンツ・モデル
(子カテゴリー)
なし

属性

linkタグには以下の属性が指定できます。

【属性】
属性説明
rel外部リソースファイルの種類を指定する(必須属性)
(例)rel="stylesheet"
※設定できる値の一例です。
 stylesheet:外部CSSファイルを指定する
 icon、shortcut icon:ファビコンファイルを指定する
 index:現ページの索引を指定する
 next:1つ先のページのURLを指定する
 prev:1つ前のページの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文章のヘッダ情報を表す