--- title: 'HTML attribute: rel' slug: Web/HTML/Attributes/rel tags: - Attribute - Attributes - Constraint validation - Link - form - rel translation_of: Web/HTML/Attributes/rel ---

{{HTMLSidebar}}{{draft}}

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

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

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

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

rel 属性は {{htmlelement('link')}}、{{htmlelement('a')}}、{{htmlelement('area')}}、{{htmlelement('form')}} の各要素に関連していますが、これらの要素のサブセットにのみ関連する値もあります。他の HTML キーワード属性の値と同様に、これらの値は大文字小文字の区別がありません。

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

値

{{htmlattrdef("alternate")}}
現在の文書の代替表現を示します。 {{htmlelement('link')}}、{{htmlelement('a')}}、{{htmlelement('area')}} で有効であり、意味は他の属性の値に依存します。

メモ: 廃止された rev="made" は rel="alternate" として扱われます。

{{htmlattrdef("author")}}
現在の文書や記事の著者を示します。 {{htmlelement('link')}}、{{htmlelement('a')}}、{{htmlelement('area')}} 要素で使用された場合、 author キーワードはハイパーリンクを生成します。 {{htmlelement('a')}} と {{htmlelement('area')}} では、リンクされた文書 (またはmailto:) が、最も近い祖先の {{htmlelement('article')}} があればその祖先の著者に関する情報を提供することを示し、そうでなければ文書全体を示します。 {{htmlelement('link')}} の場合は、文書全体の著者を表します。
{{htmlattrdef("bookmark")}}
{{htmlelement('a')}} および {{htmlelement('area')}} の rel 属性の値として使用されると、このブックマークは祖先のセクションに対して、 1 つ以上あれば最も近い祖先の {{htmlelement('article')}} または {{htmlelement('section')}} を、そうでなければ最も近い見出しの兄弟または祖先の子孫・・・というようにパーマリンクを提供します。
{{htmlattrdef("canonical")}}
{{htmlelement('link')}} で有効であり、現在の文書で推奨される URL を示します。検索エンジンで有用です。
{{htmlattrdef("dns-prefetch")}}
{{htmlelement('link')}} 要素が {{htmlelement('body')}} と {{htmlelement('head')}} の両方の中にある場合に関連し、ターゲットとなるリソースのオリジンに対する DNS 解決を先取りして実行するようブラウザーに指示します。ユーザーが必要とする可能性の高いリソースに有効で、ユーザーがリソースにアクセスする際に、ブラウザーが指定されたリソースのオリジンに対する DNS 解決を先取りして実行するため、待ち時間を短縮してパフォーマンスを向上させることができます。リソースヒントにある dns-prefetch を参照してください。
{{htmlattrdef("external")}}
{{htmlelement('form')}}、{{htmlelement('a')}}、{{htmlelement('area')}} に関連し、参照先の文書が現在のサイトの一部ではないことを示します。属性セレクターと一緒に使うことで、外部リンクを現在のサイトから離れることをユーザーに示すようなスタイルにすることができます。
{{htmlattrdef("help")}}
{{htmlelement('form')}}, {{htmlelement('link')}}, {{htmlelement('a')}}, and {{htmlelement('area')}} に関連し、 help キーワードは、リンク先のコンテンツがコンテキスト依存のヘルプを提供することを示し、ハイパーリンクを定義している要素の親とその子のための情報を提供します。 <link> 内で使用された場合、ヘルプは文書全体を対象とします。 {{htmlelement('a')}} および {{htmlelement('area')}} に含まれていて対応している場合、既定のカーソルが pointer ではなく help になります。
{{htmlattrdef("icon")}}

{{htmlelement('link')}} と共に有効で、リンクされたリソースは、現在の文書の、ユーザーインターフェースでページを表現するためのリソースであるアイコンを表します。

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

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

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

Firefox 83 以前は crossorigin 属性が rel="icon" で対応していませんでしたが、 Chrome でも未解決の問題があります。

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

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

{{htmlattrdef("license")}}

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

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

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

{{htmlattrdef("manifest")}}
ウェブアプリマニフェストです。オリジンをまたいだ読み取りのための CORS プロトコルの使用に必要です。
{{htmlattrdef("modulepreload")}}
パフォーマンスの向上に役立ちます。文書内の {{htmlelement('link')}} に関連して、 rel="modulepreload" を設定すると、ブラウザーはスクリプト (および依存関係) を先取りして取得し、文書のモジュールマップに保存して後で評価するようになります。 modulepreload リンクは、モジュールが必ずしも必要になる前に、モジュールマップに準備された (評価されていない) モジュールでネットワークの取得を確実に行うことができます。link types: modulepreload も参照してください。
{{htmlattrdef("next")}}
{{htmlelement('form')}}, {{htmlelement('link')}}, {{htmlelement('a')}}, {{htmlelement('area')}} に関連する next の値は、現在の文書が一連の文書の一部であり、次の文書が参照先の文書であることを示します。 <link> に含まれている場合、ブラウザーはその文書が次に取得されると仮定し、リソースのヒントとして扱うことができます。
{{htmlattrdef("nofollow")}}
{{htmlelement('form')}}, {{htmlelement('a')}}, {{htmlelement('area')}} に関連する nofollow キーワードは、サーチエンジンスパイダーにリンク関係を無視するよう指示します。 nofollow の関係は、現在の文書の所有者が、参照先の文書を支持していないことを示す場合があります。このキーワードは、検索エンジンオプティマイザーが、リンクファームがスパムページではないことを示すために使用します。
{{htmlattrdef("noopener")}}
{{htmlelement('form')}}, {{htmlelement('a')}}, {{htmlelement('area')}} に関連するもので、ハイパーリンクがそもそもこれらのいずれかを作成する (つまり、適切な target 属性値を持っている) 場合、補助的な閲覧コンテキストではない最上位の閲覧コンテキストを作成します。言い換えれば、 window.opener が null で target="_parent" が設定されているかのようにリンクを動作させます。

これは {{anch("opener")}} の逆です。
{{htmlattrdef("noreferrer")}}
{{htmlelement('form')}}, {{htmlelement('a')}}, {{htmlelement('area')}} に関連するもので、この値を含めると、リファラーを不明とし (Referer ヘッダーが含まれません)、あたかも noopener も設定されているかのように、最上位のの閲覧コンテキストが生成されます。
{{htmlattrdef("opener")}}
ハイパーリンクが最上位の閲覧コンテキストを生成し、それが補助的な閲覧コンテキストでない場合 (すなわち "_blank" が target 属性の値として設定されている場合)、補助的な閲覧コンテキストを生成します。事実上、 {{anch("noopener")}} の逆です。
{{htmlattrdef("pingback")}}
現在の文書へのピンバックを処理するピンバックサーバーのアドレスを与えます。
{{htmlattrdef("preconnect")}}
ユーザーエージェントが対象リソースのオリジンに先回りして接続することを指定します。
{{htmlattrdef("prefetch")}}
ユーザーエージェントが、後続のナビゲーションに必要となる可能性のあるターゲットリソースを先取りして取得し、キャッシュすることを指定します。
{{htmlattrdef("preload")}}
as 属性で指定された潜在的な方向 (および対応する方向に関連する優先度) に従って、ユーザーエージェントが現在のナビゲーションのためにターゲットリソースを先取りしてキャッシュする必要があることを指定します。
{{htmlattrdef("prerender")}}
ユーザーエージェントが先取りしてターゲットリソースを取得し、将来のより速いレスポンスに役立つ方法で処理することを指定します。
{{htmlattrdef("prev")}}

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

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

{{htmlattrdef("search")}}

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

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

{{htmlattrdef("stylesheet")}}

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

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

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

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

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

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

標準外の値

apple-touch-icon-precomposed
 <!-- third-generation iPad with high-resolution Retina display: -->
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/static/img/favicon144.e7e21ca263ca.png">
  <!-- iPhone with high-resolution Retina display: -->
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/static/img/favicon114.d526f38b09c5.png">
  <!-- first- and second-generation iPad: -->
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/static/img/favicon72.cc65d1d762a0.png">
  <!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
  <link rel="apple-touch-icon-precomposed" href="/static/img/favicon57.de33179910ae.png">
  <!-- basic favicon -->
  <link rel="icon" href="/static/img/favicon32.7f3da72dcea1.png">

ブラウザーの互換性

{{Compat("html.elements.attributes.rel")}}

仕様書

仕様書 状態 備考
{{SpecName('HTML WHATWG', 'links.html#linkTypes', 'rel attribute')}} {{Spec2('HTML WHATWG')}} opener を追加。noopener を target="_blank" の既定値とした。
{{SpecName('HTML5 W3C', 'links.html#linkTypes', 'rel attribute')}} {{Spec2('HTML5 W3C')}} tag、search、prefetch、noreferrer、nofollow、icon、author を追加。
copyright を license に改名。
start、chapter、section、subsection、appendix を削除。
{{SpecName("Preload", "#x2.link-type-preload", "preload")}} {{Spec2("Preload")}} preload を追加。
{{SpecName("Resource Hints", "#dfn-preconnect", "preconnect")}} {{Spec2("Resource Hints")}} dns-prefetch、preconnect、prerender の値を追加。
{{SpecName("HTML4.01", "types.html#type-links", "link types")}} {{Spec2("HTML4.01")}} alternate、stylesheet、start、chapter、section、subsection、appendix、bookmark を追加。
previous を prev に改名。
top と search を削除。
{{SpecName("HTML3.2", "#link", "<link>")}}

{{Spec2("HTML3.2")}} (廃止)

 top、contents、index、glossary、copyright、next、previous、help、search を追加。
{{RFC(1866, "HTML 2.0")}} {{Spec2("HTML2.0")}}(廃止) 初回定義。

ブラウザーの互換性

{{Compat("html.elements.link.rel")}}

アクセシビリティの考慮

関連情報