HTMLの <link> タグ

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

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

HTML

HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。

<link></link>
<LINK></LINK>

link要素の終了タグは省略できる。

<link>
<LINK>

XML形式で終了タグを省略することもできる。

<link />

コンテンツモデル

なし。link 要素の開始タグと終了タグの間に子要素およびテキストを含むことはできない。

属性

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

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

alternate

RSS 1.0 を指定する例を次に示す。

<link rel="alternate" type="application/rss+xml" title="RSS 1.0" href="https://example.com/index.rdf">

RSS 2.0 を指定する例を次に示す。

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="https://example.com/rss.xml">

Atom を指定する例を次に示す。

<link rel="alternate" type="application/atom+xml" title="Atom" href="https://example.com/atom.xml">

JSON Feed を指定する例を次に示す。

<link rel="alternate" type="application/feed+json" title="JSON Feed" href="https://example.com/feed.js">

canonical

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

<link rel="canonical" href="https://segakuin.com/html/link.html">

dns-prefetch

DNSプリフェッチを利用する。DNSプリフェッチを利用すると、外部ドメイン名の名前解決（DNSルックアップ）を事前に強制できる。実際にドメインにアクセスする前に、既に名前解決が完了しているため、読み込み時間の短縮を図ることができる。

<link rel="dns-prefetch" href="//ajax.googleapis.com">

icon

ファビコンを指定する例を次に示す。

<link rel="icon" href="/path/favicon.ico">

MIMEタイプを指定する場合は、次のように記述する。

<link rel="icon" href="/path/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="/path/favicon.ico" type="image/x-icon">

非常に古いInternet Explorerの場合は次のように記述する。

<link rel="shortcut icon" href="/img/favicon.ico">

stylesheet

外部の CSS を指定する例を次に示す。

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

HTML とは別ドメインの CSS を読み込むこともできる。

<link rel="stylesheet" type="text/css" href="https://example.com/style.css">

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

<link rel="stylesheet" type="text/css" href="https://example.com/style.css?20150101">

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

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

<link rel="stylesheet" type="text/css" href="https://example.com/style.css?20150102">

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

rev
参照先文書から見たこの文書との関係。指定できる属性値は rel 属性と同じ。
type
MIMEタイプを指定します。
href
参照先の文書のURIを指定します。
media
参照先の文書がどんなメディアに適したものかを指定します。
link要素のmedia属性
属性値 意味
screen ページ区切りのないコンピュータ画面
print ページ区切りのある印刷出力、または印刷プレビュー画面
tty 端末（コンソール）
tv テレビ画面のようにコンピュータ画面より解像度の低いカラーディスプレイ
projection プロジェクター
handheld 小画面でモノクロ・狭帯域の携帯デバイス
aural 音声合成装置
all すべてのデバイス
sizes
rel="icon"の場合にのみ、リンクするリソースのサイズを指定する。

JavaScript

JavaScriptからは HTMLLinkElement インタフェースを通じてlink要素へアクセスできる。

href
link要素のhref属性
crossOrigin
link要素のcrossorigin属性
rel
link要素のrel属性
as
link要素のas属性
media
link要素のmedia属性
integrity
link要素のintegrity属性
hreflang
link要素のhreflang属性
type
link要素のtype属性
imageSrcset
link要素のimagesrcset属性
imageSizes
link要素のimagesizes属性
referrerPolicy
link要素のreferrerpolicy属性
disabled
link要素のdisabled属性

参考文献

Web Hypertext Application Technology Working Group (2022) "The elements of HTML" HTML Living Standard