<LINK> は指定した文書(外部ファイル)を参照するHTMLタグです。<HEAD> と </HEAD> の間に記述します。

LINK要素は参照先として次のような関係を指定できる。

書式

HTML

<LINK [arrtibute=value ...]></LINK>
<LINK [arrtibute=value ...]>

XHTML

<link [arrtibute=value ...]></link>
<link [arrtibute=value ...] />

内容モデル

なし

属性

link要素に指定できる属性は、HTMLのバージョンにより異なる。HTMLのバージョンごとに指定できる属性の一覧を次の表に示します。

link要素の属性
属性 HTML 4.01 Transitional HTML 4.01 Strict XHTML 1.0 Strict HTML5
charset
href
hreflang
type
rel
rev
media
target
sizes
id
class
style
title
lang
xml:lang
dir
onclick
oncontextmenu
ondblclick
onmousedown
onmouseup
onmouseover
onmousemove
onmouseout
onkeypress
onkeydown
onkeyup

link要素の属性は、すべて省略可能である。

rel
この文章から見た参照先文書との関係。
link要素のrel属性
属性値 意味
alternate 代替文書
canonical 正規化したURL
contents 目次
copyright 著作権情報
glossary 用語集
index 索引
next 次の文書
parent 親(上位)の文書
prev 前の文書
shortcut iconお気に入りアイコン(ファビコン)
stylesheet スタイルシート
rev

参照先文書から見たこの文書との関係。指定できる属性値は rel 属性と同じ。

type

MIMEタイプを指定します。

href

参照先の文書のURIを指定します。

media
参照先の文書がどんなメディアに適したものかを指定します。
link要素のmedia属性
属性値 意味
screen ページ区切りのないコンピュータ画面
print ページ区切りのある印刷出力、または印刷プレビュー画面
tty 端末(コンソール)
tv テレビ画面のようにコンピュータ画面より解像度の低いカラーディスプレイ
projection プロジェクター
handheld 小画面でモノクロ・狭帯域の携帯デバイス
aural 音声合成装置
all すべてのデバイス
sizes

rel="icon"の場合にのみ、リンクするリソースのサイズを指定する。

DTD

HTML の各要素は DTD によって定義されています。 LINK 要素が DTD でどのように定義されているかを見るには、次のリンクをクリックしてください。

HTMLタグ <link> の使用例を次に示します。

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

link要素でRSSのURLを指定する例を示す。

<link rel="alternate" type="application/rss+xml" title="RSS" href="http://itref.fc2web.com/rss.rdf">

URLの正規化を行う例を次に示す。

<link rel="canonical" htef="http://itref.fc2web.com/html/link.html">

JavaScriptやスタイルシートURIにクエリパラメータを表すクエスチョンマーク(?)を付加することで、ウェブブラウザのキャッシュを制御することができる。たとえば、動的にウェブページが生成されるサイトに2015年1月1日にアクセスしたときに、以下のように出力されたとする。

<link rel="stylesheet" type="text/css" href="http://itref.fc2web/css/style.css?20150101">

スタイルシートの内容はクエリパラメータには影響されないので、「http://itref.fc2web/css/style.css」が読み込まれる。

次に、2015年1月2日にこのページにアクセスしたら、次のように出力されたとする。

<link rel="stylesheet" type="text/css" href="http://itref.fc2web/css/style.css?20150102">

読み込むスタイルシートは同じだが、クエリパラメータが異なる。ウェブブラウザのページキャッシュはクエリパラメータを含めたURLで管理されるので、上記2つはキャッシュが共有されない。つまり、スタイルシートはキャッシュされたものが使われずに、新たにウェブから読み込まれる。

お気に入りアイコン(ファビコン)

<link rel="shortcut icon" href="/img/favicon.ico">
スポンサーリンク