<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="" リンク先の記述言語 言語コード jaenzh、等
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属性の値に stylesheetpreload、または 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-prefetchmodulepreloadpingbackpreconnectprefetchpreloadprerenderstylesheet

各キーワードについてはリンクタイプをご覧ください。

旧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>