<link rel="" href="">
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | メタデータ・コンテンツ / （body内で利用できる場合：フロー・コンテンツ / フレージング・コンテンツ 本文参照） |
| 利用場所 | メタデータ・コンテンツが置ける場所 / head要素の子要素となるnoscript要素内 / （body内で利用できる場合：フレージング・コンテンツが置ける場所 本文参照） |
| 内容 | 無し（空要素） |
link要素は、その文書を別のリソースと関連付けます。多くの場合、この要素はhead要素内で使用します。
この要素を使用すると、例えば現在の文書に関連するヘルプページや翻訳版ページを示したり、外部スタイルシートを読み込むことができるようになります。
<link rel="help" href="help.html">
| 属性 | 値 | ||
|---|---|---|---|
| 任意属性（どちらか1つを必ず指定） | |||
rel="" |
現在の文書から見たリンク先の関係 | リンクタイプ | 半角スペース区切りで複数指定可能 |
itemprop="" |
 マイクロデータのプロパティ名（グローバル属性） |
プロパティ名 | 半角スペース区切りで複数指定可能 |
| 任意属性（どちらか1つ、または両方を必ず指定） | |||
href="" |
リンク先の指定 | URL | 別リソースのURL |
imagesrcset="" |
画像の候補 |
URL | 画像ファイルのURL（既定の記述子は 1x） |
URL 横幅w |
ビューポートの幅による切り替え： 画像ファイルのURL、幅記述子（w） |
||
URL 比率x |
デバイスピクセル比による切り替え： 画像ファイルのURL、画素密度記述子（x） |
||
| 任意属性 | |||
hreflang="" |
リンク先の記述言語 | 言語コード | ja、en、zh、等 |
type="" |
リンク先のMIMEタイプ | MIMEタイプ | CSSの場合は text/css |
media="" |
対象とするメディア | メディアクエリ | カンマ（ , ）区切りで複数指定可能 （既定値は all） |
sizes="" |
アイコンのサイズ | any |
可変サイズ （SVG等、ベクター形式の画像向け） |
横幅x高さ |
ピクセル数で指定、半角スペース区切りで複数指定可能 | ||
crossorigin="" |
別オリジンにあるリソースの処理方法 | anonymous |
認証情報を使用せずにCORSリクエストを送信 |
use-credentials |
認証情報を使用してCORSリクエストを送信 | ||
| 空 | anonymous と同じ |
||
referrerpolicy="" |
リソースを読み込む際のリファラーポリシー | リファラーポリシー | 既定値は strict-origin-when-cross-origin |
fetchpriority="" |
外部リソースを取得する際の相対的な優先度 |
high |
同じタイプの他の外部リソースと比較して取得の優先度が高いことを示す |
low |
同じタイプの他の外部リソースと比較して取得の優先度が低いことを示す | ||
auto |
取得の優先度は自動的に決定（既定値） | ||
integrity="" |
サブリソースの改ざんの有無を確認 |
文字列 | BASE64でエンコードされた文字列 |
imagesizes="" |
ブレイクポイント、画像の表示サイズ |
メディアクエリ 表示サイズ | メディアクエリ（任意）、画像の表示サイズ（横幅） |
as="" |
先読みコンテンツの宛先 |
audio |
HTMLの<audio> |
document |
トップレベルのナビゲートアルゴリズム | ||
embed |
HTMLの<embed> | ||
font |
CSSの@font-face | ||
frame |
HTMLの<frame> | ||
iframe |
HTMLの<iframe> | ||
image |
HTMLの<img>、favicon.ico、他 | ||
manifest |
HTMLの<link rel="manifest"> | ||
object |
HTMLの<object> | ||
report |
CSP、NELのレポート | ||
style |
HTMLの<link rel="stylesheet">、CSSの@import | ||
track |
HTMLの<track> | ||
video |
HTMLの<video> | ||
xslt |
<?xml-stylesheet> | ||
audioworklet |
＊audioWorklet.addModule() | ||
paintworklet |
＊CSS.paintWorklet.addModule() | ||
script |
＊HTMLの<script>、importScripts() | ||
serviceworker |
＊navigator.serviceWorker.register() | ||
sharedworker |
＊SharedWorker | ||
worker |
＊Worker | ||
fetch |
空文字列 | ||
color="" |
ページピンアイコンの色 |
色 | 既定値は無し |
disabled |
リンクの無効化 |
（disabled） |
値は省略可能 |
blocking="" |
外部リソースの読み込み中にブロックする処理 |
render |
文書のレンダリングをブロック ※値（ブロッキングトークン）は追加される可能性がある |
| 廃止属性（HTML Living Standardでは未定義） | |||
rev="" |
 リンク先から見た現在の文書の関係 |
リンクタイプ | 半角スペース区切りで複数指定可能 |
| グローバル属性（この要素上では、title属性が特別な意味を持ちます） | |||
title="" |
リンク先のタイトル | テキスト | 任意のタイトル |
- imagesrcset属性とimagesizes属性は、
rel="preload"とas="image"の両方が指定されている場合に使用することができます。この2つの属性はimg要素やsource要素のsrcset属性とsizes属性に対応します。（指定方法の詳細はレスポンシブイメージを設定するをご覧ください） - imagesrcset属性で画像の横幅（
w）を指定する場合は、imagesizes属性の指定も必要となります。逆に、デバイスピクセル比（x）を指定する場合はimagesizes属性は無効となります。 - sizes属性は、rel属性の値に
iconまたはapple-touch-iconが指定されている場合に使用することができます。 - crossorigin属性の値を省略した場合は
anonymousになります。属性そのものを省略した場合はCORSリクエストを行いません。 - integrity属性とblocking属性は、rel属性の値に
stylesheet、preload、またはmodulepreloadが指定されている場合に使用することができます。 - as属性は、rel属性の値に
preloadまたはmodulepreloadが指定されている場合に使用することができます。ただし、modulepreloadの場合は＊印がついた値しか指定できません。 - color属性は、
rel="mask-icon"（拡張）が指定されている場合に使用することができます。 - disabled属性は、
rel="stylesheet"が指定されている場合に使用することができます。 rel="stylesheet"が指定されたlink要素では、title属性の値がスタイルの設定名を表します。- この要素に定義されていたnonce属性は、グローバル属性として再定義されました。
各属性の詳細については、下記のページを参考にしてください。
body内での利用に関して
itemprop属性が指定されている場合、またはrel属性の値にbody-okなキーワードのみが指定されている場合は、link要素をbody要素内に配置することができます。
- body-okなキーワード
dns-prefetch、modulepreload、pingback、preconnect、prefetch、preload、prerender、stylesheet
各キーワードについてはリンクタイプをご覧ください。
- 旧HTMLからの変更点
-
- HTML5：rev属性、charset属性、target属性が廃止され、sizes属性とcrossorigin属性が追加されました。
- HTML5：head要素の子要素となるnoscript要素内に配置できるようになりました。
- HTML5.1：rev属性が復活しました。
- HTML5.2：referrerpolicy属性とnonce属性が追加されました。
- HTML LS：rev属性が再度廃止され、nonce属性がグローバル属性に移り、itemprop属性（グローバル属性）、imagesrcset属性、imagesizes属性、integrity属性、as属性、color属性、disabled属性、blocking属性が追加されました。
- HTML LS：条件付きでbody要素内に配置できるようになりました。
- HTML LS：fetchpriority属性が追加されました。［2023/04/20］
使用例
<!DOCTYPE html>
<html>
<head>
<link rel="alternate" href="english.html" hreflang="en" title="English">
<title>文書のタイトル</title>
</head>
<body>
</body>
</html>