<link> - リンク

トップ > HTMLリファレンス > <link>

概要

形式
<link rel="..." href="...">
サポート
LS / H2 / e3 / Ch1 / Fx1 / Sa1 / Op1 / N4
カテゴリ
メタデータコンテンツ
body 内で利用可能な場合: フローコンテンツ
body 内で利用可能な場合: フレージングコンテンツ
親要素
メタデータコンテンツ を子要素に持てるもの
head 要素の子要素である noscript 要素
body 内で利用可能な場合: フレージングコンテンツ を子要素に持てるもの
子要素
無し(Empty)
タグの省略
開始タグ:必須 / 終了タグ:無し
属性
グローバル属性
href
crossorigin
rel
rev (HTML 5.2)
media
nonce
integrity (HTML Living Standard)
hreflang
type
referrerpolicy
sizes
as (HTML Living Standard)
color (HTML Living Standard)

説明

<link> は、href 属性で指定した文書を参照します。<head>~</head>の間に記述し、いろいろな目的で使用されます。

属性

【共通属性】
グローバル属性
詳細は グローバル属性 を参照してください。
【重要属性】
rel=rel
LS/H2/e3/Ch/Fx/Sa/Op/N4
この文書から見た参照先の文書との関係を指定します。stylesheet(スタイルシート)、fontdef(フォント定義ファイル)、Contents(目次)、Index(索引)、Glossay(用語集)、Copyright(著作権情報)、Next(次の文書)、Prev(前の文書)、Parent(上位の文書)、Help(ヘルプ)、Bookmark(ブックマーク)などがあります。
rev=rel
H5.1/H2-H4
参照先の文書から見たこの文書との関係を指定します。HTML5 で一度廃止されましたが、RDFa 対応の目的で HTML 5.1 で復活しました。HTML Living Standard では採用されていません。
href=url
LS/H2/e3/Ch/Fx/Sa/Op/N4
文書のURLを指定します。
【セキュリティ関連】
integrity=xxx
LS
サブリソースの改竄チェックで用いられるインテグリティメタデータを指定します。
crossorigin=state
LS/H5
CORS(Cross-Origin Resource Sharing)で使用される属性で、他のサイトのリソースにアクセスする際に、認証情報を使用するかどうかを指定します。
referrerpolicy=policy
LS/H5.2/Ch46/Fx50
リソースにアクセスした際のリファラー(Referer)送信ポリシーを指定します。
no-referrer
送信しない。
no-referrer-when-downgrade
https から http にダウングレードする際には送信しない(デフォルト)。
same-origin
同一オリジン間移動の場合のみ送信する。
origin
オリジン情報(プロトコル+FQDN+ポート番号)のみを送信する。
strict-origin
オリジン情報(プロトコル+FQDN+ポート番号)のみを送信するが、ダウングレード時には送信しない。
origin-when-cross-origin
オリジンをまたがる場合は、オリジン情報のみを送信する。
strict-origin-when-cross-origin
オリジンをまたがる場合は、オリジン情報のみを送信するが、ダウングレード時には送信しない。
unsafe-url
常に送信する。
詳細は下記を参照してください。
 https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Referrer-Policy
nonce=nonce
LS/H5.2
CPS(Content Security Policy)チェックで用いられるワンタイムトークンを指定します。HTML Living Standard では、グローバル属性として定義されています。詳細は nonce 属性を参照してください。
【その他属性】
hreflang=lang
LS/H4
参照先の文書の言語を指定します。
media=media
LS/H4/e4
文書の出力先を指定します。
screen
通常の画面に出力します。
print
印刷プレビュー画面に出力します。
all
全出力先に出力します。
sizes=n
LS/H5
rel="icon" の際のアイコンサイズを sizes="16x16" のように指定します。sizes="16x16 32x32" のように複数指定することも可能です。
type=type
LS/H4/e3/N4
参照先の文書のタイプを指定します。
as=type
LS
<link rel="preload"> で、プリロードするコンテンツのタイプを指定します。タイプには fetch, audio, audioworklet, document, embed, font, image, manifest, object, paintworklet, report, script, serviceworker, sharedworker, style, track, video, worker, xslt などを指定します。
color=color
LS
<link rel="mask-icon"> でページをピン止めする際に使用されるアイコンの色を指定します。
【廃止済みの属性】
charset=charset
[非推奨] H4-4
参照先の文書のキャラクタセット(Shift_Jisなど)を指定します。HTML5 には定義されていません。
methods=methods
[非推奨] H2-4
HTML2.0で定義されていましたが、現在は使用されていません。
target=target
[非推奨] H4T-4T
表示ターゲットを指定します。
urn=url
[非推奨] H2-4
HTML2.0で定義されていましたが、現在は使用されていません。
disabled
[非推奨] e4
この<link>タグを無効化します。
src=url
[非推奨] N4
hrefと同じ意味を持ちます。

外部スタイルシート

外部スタイルシートを指定します。詳細は「CSSリファレンス」を参照してください。

HTML
<!DOCTYPE html>
<html>
 <head>
  <title>TEST</title>
  <link rel="stylesheet" href="sample.css" type="text/css">
 </head>
 <body>
     :
 </body>
</html>
 

外部スタイルシートファイルには例えば次のように記述しておきます。これにより、すべての h1 要素の色を赤くすることができます。

CSS
H1 { color: red }

代替スタイルシート

Firefox では代替スタイルシートをサポートしています。下記の様に記述しておくことで、Firefox ブラウザの [表示]-[スタイルシート] メニューから、閲覧者が好みのスタイルシートを選択することができます。

HTML
<link href="normal.css" rel="stylesheet" type="text/css" title="標準スタイル">
<link href="red.css" rel="alternate stylesheet" type="text/css" title="赤系スタイル">
<link href="blue.css" rel="alternate stylesheet" type="text/css" title="青系スタイル">

他文書との関連

例えば、ブラウザの実装によっては、以下のようなリンクタグを解釈して、ツールバーにナビゲーションボタンを表示するものもあるかもしれません。

HTML
<link rel="index" href="index.html">
<link rel="contents" href="content.html">
<link rel="prev" href="chapter1.html">
<link rel="next" href="chapter3.html">

プリロード

rel="preload" を用いて、JavaScript, CSS, イメージファイルなどをプリロードできるようになりました。

HTML
<link rel="preload" as="javascript" href="sample.js">
<link rel="preload" as="stylesheet" href="sample.css">
<link rel="preload" as="image" href="sample.jpg">

お気に入りアイコン(Favicon)

お気に入りやブックマークに登録した際のアイコンを指定することができます。Chrome, Firefox, Edge, Opera, Safari はすべての形式をサポートしていますが、IE はバージョンによってサポートする形式が異なります。

HTML
<link rel="shortcut icon" href="/icon/favicon.ico">  // IE1~
<link rel="icon" type="image/x-icon" href="/icon/favicon.ico"> // IE9~
<link rel="icon" href="/icon/favicon.ico">  // IE11~
<link rel="icon" type="image/png" href="/icon/favicon.png">  // IE11~
<link rel="icon" type="image/gif" href="/icon/favicon.gif">  // IE11~
<link rel="icon" type="image/png" href="/icon/favicon-16.png" sizes="16x16">  // IE11~
<link rel="icon" type="image/png" href="/icon/favicon-32.png" sizes="32x32">  // IE11~

ピン止めアイコン

rel="mask-icon" を用いて、ページをブラウザにピン止めする際に使用するアイコンを指定することができます。画像は、黒一色と透過色のみの正方形の SVG ファイルで、color 属性により色を指定します。Safari 9 などがサポートしています。

HTML
<link rel="mask-icon" color="red" href="/icon/sample.svg">

ダイナミックフォント

Netscape Communicator 4.* では、ダイナミックフォントの技術で、フォントファイル(*.pfr)をサーバーからダウンロードする機能をサポートしていました。

HTML
<link rel="fontdef" src="xxfont.pfr">

JSS(JavaScript Style Sheet)

Netscape Communicator 4.* では、CSS の他にも JavaScript の文法でスタイルを記述する JSS(JavaScript Style Sheet)をサポートしていました。

HTML
<link rel="stylesheet" type="text/javascript" href="xxx.jss">

リンク


Copyright (C) 1996-2017 杜甫々
初版:1996年9月10日 最終更新:2017年12月31日
http://www.tohoho-web.com/html/link.htm