1. 開発者向けのウェブ技術
  2. HTML
  3. リファレンス
  4. 属性
  5. rel

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

HTML rel 属性

rel 属性は、リンク先のリソースと現在の文書との関係を定義します。 <link>、<a>、<area>、<form> で有効で、対応する値は属性が見つかった要素に依存します。

関係の種類は rel 属性の値によって決まりますが、 rel 属性が存在する場合は、一連の固有のキーワードが順不同で空白で区切られたものであることが必要です。意味を表現しないクラス名とは異なり、 rel 属性は機械と人間の両方にとって意味のあるトークンを表現しなければなりません。現在、 rel 属性の値として登録されているのは、 IANA link relation registry、HTML Living Standard、そして Living Standard が提案している microformats wiki の自由に編集可能な existing-rel-values ページです。上記の 3 つの情報源のいずれにも存在しない rel 属性が使用された場合、 HTML バリデーター（W3C Markup Validation Service など）によっては警告を生成します。

次の表は、既存のキーワードの中でも特に重要なものです。空白で区切られた値の中のすべてのキーワードは、その値の中で一意でなければなりません。

rel の値 説明 <link> <a> および <area> <form>
alternate 現在の文書の別な表現。 リンク リンク 不許可
author 現在の文書や記事の著者。 リンク リンク 不許可
bookmark 直近の祖先の章に対するパーマリンク。 不許可 リンク 不許可
canonical 現在の文書の推奨 URL。 リンク 不許可 不許可
compression-dictionary 圧縮辞書へのリンクで、これはこのサイトのリソースのための将来のダウンロードを圧縮するために使用されます。 リンク 不許可 不許可
dns-prefetch 宛先リソースのオリジンに対する DNS 解決を先取りして行うようブラウザーに指示する 外部リソース 不許可 不許可
external 参照先の文書は、現在の文書と同じサイトの一部ではありません。 不許可 注釈 注釈
expect blocking="render" と共に使用された場合、文書内の主要部分が解釈できるまでページをレンダリングブロックできるようにし、一貫したレンダリングを実現します。 リンク 不許可 不許可
help コンテンツに応じたヘルプにリンクします。 リンク リンク リンク
icon 現在の文書を表すアイコンです。 外部リソース 不許可 不許可
license 現在の文書のメインコンテンツが、参照先の文書で説明されている著作権ライセンスによってカバーされていることを示す。 リンク リンク リンク
manifest ウェブアプリマニフェスト リンク 不許可 不許可
me 現在の文書がリンク先のコンテンツを所有する人物を表すことを示す リンク 不許可 不許可
modulepreload スクリプトを先読みし、後で評価できるようにこの文書のモジュールマップに保存するようブラウザーに指示します。オプションで、モジュールの依存関係も読み取ることができます。 外部リソース 不許可 不許可
next 現在の文書が一連の文書の一部であり、その中の次の文書が参照先の文書であることを示します。 リンク リンク リンク
nofollow 現在の文書の原著者または発行者が、参照先の文書を支持していないことを示します。 不許可 注釈 注釈
noopener ハイパーリンクが補助的な閲覧コンテキストのいずれかを生成する (つまり、適切な target 属性値を持つ) 場合、補助的な閲覧コンテキストではない最上位の閲覧コンテキストを生成します。 不許可 注釈 注釈
noreferrer Referer ヘッダーを含めません。さらに、 noopener と同じ効果もあります。 不許可 注釈 注釈
opener ハイパーリンクによって、補助閲覧コンテキストではない最上位の閲覧コンテキストが生成される場合 (すなわち、 target 属性の値が "_blank" である場合)、補助閲覧コンテキストを生成します。 不許可 注釈 注釈
pingback 現在の文書へのピンバックを処理するピンバックサーバーのアドレスを指定します。 外部リソース 不許可 不許可
preconnect ユーザーエージェントが対象となるリソースのオリジンへの接続を先読みすることを指定します。 外部リソース 不許可 不許可
prefetch ユーザーエージェントが、後続のナビゲーションに必要となる可能性の高いターゲットリソースを先取りしてキャッシュすることを指定します。 外部リソース 不許可 不許可
preload as 属性で指定された潜在的な距離 (および対応する距離に関連する優先度) に従って、ユーザーエージェントが現在のナビゲーションのためにターゲットリソースを先取りしてキャッシュしなければならないことを指定する。 外部リソース 不許可 不許可
prerender ユーザーエージェントが、対象となるリソースを先取りして取得し、将来的に高速なレスポンスを実現するための処理を行うことを指定します。この機能は投機ルール API で置き換えられました。 外部リソース 不許可 不許可
prev 現在の文書が一連の文書の一部であり、その中の前の文書が参照先の文書であることを示します。 リンク リンク リンク
privacy-policy 現在の文書に適用されるデータの収集と使用慣行に関する情報へのリンクを提供します。 リンク リンク 不許可
search 現在の文書とその関連ページを検索するのに使用できるリソースへのリンクを提供します。 リンク リンク リンク
stylesheet スタイルシートをインポートします。 外部リソース 不許可 不許可
tag 現在の文書に適用される (与えられたアドレスで識別される) タグを与えます。 不許可 リンク 不許可
terms-of-service 文書の提供者と、その文書を使用したいユーザーとの間の合意、つまり利用規約へのリンクです。 リンク リンク 不許可

rel 属性は <link>、<a>、<area>、<form> の各要素に関連していますが、これらの要素の一部にのみ関連する値もあります。他の HTML キーワード属性の値と同様に、これらの値は大文字小文字の区別がありません。

rel 属性には既定値がありません。属性が省略された場合や、属性の値がいずれも対応されていない場合、文書は宛先のリソースとの間にハイパーリンクがあるということ以外には、特に関係を持ちません。この場合、 <link> と <form> では、 rel 属性がない場合、キーワードがない場合、または上記の空白で区切られたキーワードのうち 1 つ以上がない場合、その要素はいかなるリンクも生成しません。 <a> と <area> はリンクを生成しますが、関係は定義されません。

値

alternate

現在の文書の代替表現を示します。 <link>、<a>、<area> で有効であり、意味は他の属性の値に依存します。

  • stylesheet キーワードと共に <link> で使用された場合は、代替スタイルシートを生成します。

    html
    <!-- 常設スタイルシート -->
<link rel="stylesheet" href="default.css" />
<!-- 代替スタイルシート -->
<link
  rel="alternate stylesheet"
  href="highcontrast.css"
  title="High contrast" />

  • この文書の言語と異なる hreflang 属性と共に使用された場合は、翻訳版を表します。

  • type 属性が "application/rss+xml" または "application/atom+xml" の値で使用された場合は、シンジケーションフィードを参照するハイパーリンクが生成されます。

    html
    <link
  rel="alternate"
  type="application/atom+xml"
  href="posts.xml"
  title="Blog" />

  • それ以外の場合は、現在の文書の代替表現を参照するハイパーリンクを作成します。その性質は hreflang と type 属性によって与えられます。

    • もし hreflang が alternate で指定され、 hreflang の値が現在の文書の言語と異なる場合には、参照された文書が翻訳であることを示します。
    • もし type が alternate に指定された場合、参照された文書が代替形式（PDF など）であることを示します。
    • hreflang と type 属性は、どちらも alternate と同時に指定することができます。
    html
    <link
  rel="alternate"
  href="/fr/html/print"
  hreflang="fr"
  type="text/html"
  media="print"
  title="French HTML (for printing)" />
<link
  rel="alternate"
  href="/fr/pdf"
  hreflang="fr"
  type="application/pdf"
  title="French PDF" />
author

参照する文書が、現在の文書または記事の著者に関する追加情報を提供することを示します。<link>, <a>, <area> 要素に関連します。

<a> と <area> では、リンクされた文書（または mailto:）が、最も近い <article> の祖先があればその、なければ文書全体の著者に関する情報を提供することを示します。

<link> では、文書全体の作者を表します。

メモ: 歴史的な理由から、廃止された属性値 rev="made" は rel="author" として扱われます。

bookmark

<a> および <area> 属性の rel 属性の値として使用されます。最も近い祖先 <article> 要素がある場合、そのパーマリンクを与えます。祖先となる <article> 要素がない場合、リンクしている要素が最も近いとされるセクションのパーマリンクを与えます。

canonical

<link> で有効であり、現在の文書で推奨される URL を示します。検索エンジンが重複するコンテンツをまとめるのに有用です。

compression-dictionary

<link> で有効で、このサイト上のリソースの今後のダウンロードを圧縮するために使用できる圧縮辞書を定義します。これにより、これらのリソースのダウンロードサイズは、標準の圧縮よりも小さくなります。

dns-prefetch

<link> 要素が <body> と <head> の両方の中にある場合に関連し、ターゲットとなるリソースのオリジンに対する DNS 解決を先取りして実行するようブラウザーに指示します。ユーザーが必要とする可能性の高いリソースに有効で、ユーザーがリソースにアクセスする際に、ブラウザーが指定されたリソースのオリジンに対する DNS 解決を先取りして実行するため、待ち時間を短縮してパフォーマンスを向上させることができます。リソースヒントにある dns-prefetch を参照してください。

external

<form>、<a>、<area> に関連し、参照先の文書が現在のサイトの一部ではないことを示します。属性セレクターと一緒に使うことで、外部リンクを現在のサイトから離れることをユーザーに示すようなスタイルにすることができます。

expect

文書の重要な部分が解釈できるまで、ページがレンダリングブロックされるようにします。これにより、ページは一貫性を保ってレンダリングされます。レンダリングブロックは、 blocking="render" 属性が追加されている場合にのみ発生することに注意してください。

メモ: その使用方法の詳細については、「ページの状態を安定化させ、文書間の遷移を一貫性のあるものにする」を参照してください。

help

<form>, <link>, <a>, <area> に関連し、 help キーワードは、リンク先のコンテンツがコンテキスト依存のヘルプを提供することを示し、ハイパーリンクを定義している要素の親とその子のための情報を提供します。 <link> 内で使用された場合、ヘルプは文書全体を対象とします。 <a> および <area> に含まれていて対応している場合、既定の cursor が pointer ではなく help になります。

icon

<link> で使用したときに有効となり、リンクされたリソースは、ユーザーインターフェイスで現在の文書のページを表現するためのリソースであるアイコンを表します。

icon の値の最も一般的な用途はファビコンです。

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

複数の <link rel="icon"> があった場合、ブラウザーはそれぞれの media 属性、type 属性、sizes 属性を使って、最も適切なアイコンを選択します。複数のアイコンが同等のレベルで適切である場合は、最後のアイコンが使用されます。最も適切なアイコンが、対応していないファイル形式を使用しているなどの理由で不適切であることが後に判明した場合、ブラウザーは次に適切なアイコンを選択します。

メモ: crossorigin 属性は rel="icon" においては Chromium ベースのブラウザーは対応していません。公開 Chromium issue を参照してください。

メモ: Apple の iOS では、他のモバイルブラウザーのように、ウェブクリップやスタートアップのプレースホルダー用のウェブページのアイコンを選択するために、このリンク種別や sizes 属性を使用していません。 代わりに、標準外の apple-touch-icon および apple-touch-startup-image をそれぞれ使用しています。

メモ: shortcut リンク種別が icon の前に見られることが良くありますが、このリンク種別は適合するものではなく、無視されるので使用しないでください。

license

<a>, <area>, <form>, <link> の各要素で有効である license の値は、ハイパーリンクがライセンス情報を記述した文書につながること、現在の文書のメインコンテンツが、参照された文書で記述された著作権ライセンスによってカバーされていることを示します。 <head> 要素内にない場合、規格では、文書の特定の部分に適用されるハイパーリンクか、文書全体に適用されるハイパーリンクかを区別していません。ページ上のデータのみがこれを示すことができます。

html
<link rel="license" href="#license" />

メモ: 認識はされているものの、同義語の copyright は正しくないため使用しないでください。

manifest

ウェブアプリマニフェストです。オリジンをまたいだ読み取りのための CORS プロトコルの使用に必要です。

modulepreload

パフォーマンスの向上に役立ちます。文書内の <link> に関連して、 rel="modulepreload" を設定すると、ブラウザーはスクリプト (および依存関係) を先取りして取得し、文書のモジュールマップに保存して後で評価するようになります。 modulepreload リンクは、モジュールが必ずしも必要になる前に、モジュールマップに準備された (評価されていない) モジュールでネットワークの取得を確実に行うことができます。modulepreload も参照してください。

next

<form>, <link>, <a>, <area> に関連する next の値は、現在の文書が一連の文書の一部であり、次の文書が参照先の文書であることを示します。 <link> に含まれている場合、ブラウザーはその文書が次に取得されると仮定し、リソースのヒントとして扱うことができます。

nofollow

<form>, <a>, <area> に関連する nofollow キーワードは、検索エンジンスパイダーにリンク関係を無視するよう指示します。 nofollow の関係は、現在の文書の所有者が、参照先の文書を支持していないことを示す場合があります。このキーワードは、検索エンジンオプティマイザーが、リンクファームがスパムページではないことを示すために使用します。

noopener

<form>, <a>, <area> に関連するもので、ハイパーリンクがそもそもこれらのいずれかを作成する（つまり、適切な target 属性値を持っている）場合、補助的な閲覧コンテキストではない最上位の閲覧コンテキストを作成します。言い換えれば、 window.opener が null で target="_parent" が設定されているかのようにリンクを動作させます。

これは opener の逆です。

noreferrer

<form>, <a>, <area> に関連するもので、この値を含めると、リファラーを不明とし（Referer ヘッダーが含まれません）、あたかも noopener も設定されているかのように、最上位のの閲覧コンテキストが生成されます。

opener

ハイパーリンクが最上位の閲覧コンテキストを生成し、それが補助的な閲覧コンテキストでない場合（すなわち "_blank" が target 属性の値として設定されている場合）、補助的な閲覧コンテキストを生成します。事実上、 noopener の逆です。

pingback

現在の文書へのピンバックを処理するピンバックサーバーのアドレスを与えます。ピンバック仕様書を参照してください。

preconnect

ブラウザーがリンク先のウェブサイトへの接続を開くためのヒントを事前に提供し、個人情報の開示やコンテンツのダウンロードを行わず、リンクが続いたときにリンク先のコンテンツをすばやく取得できるようにします。

prefetch

ユーザーエージェントが、後続のナビゲーションに必要となる可能性のあるターゲットリソースを先取りして取得し、キャッシュすることを指定します。 詳しくは先読みを参照してください。

preload

ユーザーエージェントが、 as 属性（および対応する出力先に関連付けられた優先度）によって指定された潜在的な出力先に従って、現在のナビゲーションの対象となるリソースを先行して取得し、キャッシュしなければならないことを指定します。 preload 値のページを参照してください。

prerender

ユーザーエージェントが対象リソースを先取りして取得し、そのサブリソースの取得やレンダリングの実行など、将来的に高速なレスポンスを提供することを支援する方法で処理することを指定します。この機能は投機ルール APIで置き換えられました。

prev

next キーワードと同様に、<form>, <link>, <a>, <area> に関連する prev の値は、現在の文書が一連の文書の一部であり、このリンクが一連の文書内の直前の文書を参照していることを示します。

メモ: 別名である previous は正しくないため使用しないでください。

privacy-policy

<a>、<area>、<link> 要素で有効で、 privacy-policy の値は参照する文書が現在の文書のデータ収集と使用方法を説明するプライバシーポリシーであることを示します。

<form>, <link>, <a>, <area> の各要素に関連する search キーワードは、ハイパーリンクが、現在の文書、サイト、および関連リソースでの検索のために特別に設計されたインターフェイスを持つ文書を参照していることを示し、検索に使用できるリソースへのリンクを提供します。

type 属性が application/opensearchdescription+xml に設定されている場合、そのリソースは、Firefox のインターフェイスに簡単に追加できる OpenSearch プラグインです。

stylesheet

<link> 要素で有効で、スタイルシートとして使われる外部リソースをインポートします。 type 属性は text/css スタイルシートの場合は既定値となっているので必要ありません。text/css 型スタイルシートでない場合は、 type を宣言するのがベストです。

この属性は、リンクがスタイルシートであることを定義しますが、他の属性や rel 値内の他のキーワードとの相互作用は、スタイルシートがダウンロードされるかどうかや使用されるかどうかに影響します。

alternate キーワードと一緒に使われると、代替のスタイルシートを定義します。この場合、空ではない title を入れてください。

メディアが media 属性の値と一致しない場合、外部スタイルシートは使用されず、ダウンロードもされません。

オリジンをまたいだ読み取りには CORS プロトコルが必要です。

tag

<a> と <area> 要素で有効であり、現在の文書に適用される (指定されたアドレスで識別される) タグを与えます。タグの値は、リンク先の文書に適用されるタグを記述した文書を参照していることを示します。このリンク種別は、タグクラウド内のタグには適していません。タグクラウド内のタグは、複数のページに適用されるのに対し、 rel 属性の tag 値は単一の文書に適用されるからです。

terms-of-service

<a>、<area>、<link> 要素で有効で、 terms-of-service 値は参照する文書が現在の文書の提供者と、指定された文書を使用したいユーザーとの間で記述する利用規約であることを示します。

標準外の値

apple-touch-icon

iOS 端末上のウェブアプリケーションのアイコンを指定します。

仕様書

仕様書
HTML
# linkTypes
HTML
# attr-hyperlink-rel
HTML
# attr-form-rel

ブラウザーの互換性

html.elements.link.rel

html.elements.a.rel

html.elements.area.rel

html.elements.form.rel

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告