HTMLの <link> タグ
<LINK> は指定した文書(外部ファイル)を参照するHTMLタグです。<HEAD> と </HEAD> の間に記述します。
LINK要素は参照先として次のような関係を指定できる。
- 外部スタイルシートへの参照 (rel="stylesheet")
- スクリプトへの参照 (rel="script")
- この文書の印刷向きのバージョン(例えば、PostScript や PDFバージョン)への参照 (rel="alternate" media="print")
- RSSのURLを指定 (rel="alternate")
- URLの正規化 (rel="canonical")
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