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 page ページです。上記の 3 つの情報源のいずれにも存在しない rel
属性が使用された場合、 HTML バリデーター(W3C Markup Validation Service など)によっては警告を生成します。
次の表は、既存のキーワードの中でも特に重要なものです。空白で区切られた値の中のすべてのキーワードは、その値の中で一意でなければなりません。
rel の値 |
説明 |
|
および
|
|
---|---|---|---|---|
alternate |
現在の文書の別な表現。 | リンク | リンク | 不許可 |
author |
現在の文書や記事の著者。 | リンク | リンク | 不許可 |
bookmark |
直近の祖先の章に対するパーマリンク。 | 不許可 | リンク | 不許可 |
canonical |
現在の文書の推奨 URL。 | リンク | 不許可 | 不許可 |
dns-prefetch |
宛先リソースのオリジンに対する DNS 解決を先取りして行うようブラウザーに指示する | 外部リソース | 不許可 | 不許可 |
external |
参照先の文書は、現在の文書と同じサイトの一部ではありません。 | 不許可 | 注釈 | 注釈 |
expect |
文書内の主要部分が解釈できるまでページをレンダリングブロックし、一貫したレンダリングを実現します。 | リンク | 不許可 | 不許可 |
help |
コンテンツに応じたヘルプにリンクします。 | リンク | リンク | リンク |
icon |
現在の文書を表すアイコンです。 | 外部リソース | 不許可 | 不許可 |
license |
現在の文書のメインコンテンツが、参照先の文書で説明されている著作権ライセンスによってカバーされていることを示す。 | リンク | リンク | リンク |
manifest |
ウェブアプリマニフェスト | リンク | 不許可 | 不許可 |
me |
現在の文書がリンク先のコンテンツを所有する人物を表すことを示す | リンク | 不許可 | 不許可 |
modulepreload |
スクリプトを先取りして取得し、後で評価できるようにこの文書のモジュールマップに保存するようブラウザーに指示します。オプションで、モジュールの依存関係も読み取ることができます。 | 外部リソース | 不許可 | 不許可 |
next |
現在の文書が一連の文書の一部であり、その中の次の文書が参照先の文書であることを示します。 | リンク | リンク | リンク |
nofollow |
現在の文書の原著者または発行者が、参照先の文書を支持していないことを示します。 | 不許可 | 注釈 | 注釈 |
noopener |
ハイパーリンクが補助的な閲覧コンテキストのいずれかを生成する (つまり、適切な target 属性値を持つ) 場合、補助的な閲覧コンテキストではない最上位の閲覧コンテキストを生成します。 |
不許可 | 注釈 | 注釈 |
noreferrer |
Referer ヘッダーを含めません。さらに、 noopener と同じ効果もあります。 |
不許可 | 注釈 | 注釈 |
opener |
ハイパーリンクによって、補助閲覧コンテキストではない最上位の閲覧コンテキストが生成される場合 (すなわち、 target 属性の値が "_blank " である場合)、補助閲覧コンテキストを生成します。 |
不許可 | 注釈 | 注釈 |
pingback |
現在の文書へのピンバックを処理するピンバックサーバーのアドレスを指定します。 | 外部リソース | 不許可 | 不許可 |
preconnect |
ユーザーエージェントが対象となるリソースのオリジンへの接続を先読みすることを指定します。 | 外部リソース | 不許可 | 不許可 |
prefetch |
ユーザーエージェントが、後続のナビゲーションに必要となる可能性の高いターゲットリソースを先取りしてキャッシュすることを指定します。 | 外部リソース | 不許可 | 不許可 |
preload |
[as](as) 属性で指定された潜在的な距離 (および対応する距離に関連する優先度) に従って、ユーザーエージェントが現在のナビゲーションのためにターゲットリソースを先取りしてキャッシュしなければならないことを指定する。 |
外部リソース | 不許可 | 不許可 |
prerender |
ユーザーエージェントが、対象となるリソースを先取りして取得し、将来的に高速なレスポンスを実現するための処理を行うことを指定します。 | 外部リソース | 不許可 | 不許可 |
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" />
- もし
-
-
参照する文書が、現在の文書または記事の著者に関する追加情報を提供することを示します。
<link>
,<a>
,<area>
要素に関連します。<a>
と<area>
では、リンクされた文書(またはmailto:
)が、最も近い<article>
の祖先があればその、なければ文書全体の著者に関する情報を提供することを示します。<link>
では、文書全体の作者を表します。メモ: 歴史的な理由から、廃止された属性値
rev="made"
はrel="author"
として扱われます。 bookmark
-
<a>
および<area>
属性のrel
属性の値として使用されます。最も近い祖先<article>
要素がある場合、そのパーマリンクを与えます。祖先となる<article>
要素がない場合、リンクしている要素が最も近いとされるセクションのパーマリンクを与えます。 canonical
-
<link>
で有効であり、現在の文書で推奨される URL を示します。検索エンジンが重複するコンテンツをまとめるのに有用です。 dns-prefetch
-
<link>
要素が<body>
と<head>
の両方の中にある場合に関連し、ターゲットとなるリソースのオリジンに対する DNS 解決を先取りして実行するようブラウザーに指示します。ユーザーが必要とする可能性の高いリソースに有効で、ユーザーがリソースにアクセスする際に、ブラウザーが指定されたリソースのオリジンに対する DNS 解決を先取りして実行するため、待ち時間を短縮してパフォーマンスを向上させることができます。リソースヒントにある dns-prefetch を参照してください。 external
-
<form>
、<a>
、<area>
に関連し、参照先の文書が現在のサイトの一部ではないことを示します。属性セレクターと一緒に使うことで、外部リンクを現在のサイトから離れることをユーザーに示すようなスタイルにすることができます。 help
-
<form>
,<link>
,<a>
, and<area>
に関連し、help
キーワードは、リンク先のコンテンツがコンテキスト依存のヘルプを提供することを示し、ハイパーリンクを定義している要素の親とその子のための情報を提供します。<link>
内で使用された場合、ヘルプは文書全体を対象とします。<a>
および<area>
に含まれていて対応している場合、既定のカーソルが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
Experimental-
ウェブアプリマニフェストです。オリジンをまたいだ読み取りのための 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](target)="_parent"
が設定されているかのようにリンクを動作させます。これは
opener
の逆です。 noreferrer
-
<form>
,<a>
,<area>
に関連するもので、この値を含めると、リファラーを不明とし(Referer
ヘッダーが含まれません)、あたかもnoopener
も設定されているかのように、最上位のの閲覧コンテキストが生成されます。 opener
-
ハイパーリンクが最上位の閲覧コンテキストを生成し、それが補助的な閲覧コンテキストでない場合 (すなわち "
_blank
" がtarget
属性の値として設定されている場合)、補助的な閲覧コンテキストを生成します。事実上、 noopener の逆です。 pingback
-
現在の文書へのピンバックを処理するピンバックサーバーのアドレスを与えます。ピンバック仕様書を参照してください。
preconnect
-
ブラウザーがリンク先のウェブサイトへの接続を開くためのヒントを事前に提供し、個人情報の開示やコンテンツのダウンロードを行わず、リンクが続いたときにリンク先のコンテンツをすばやく取得できるようにします。
prefetch
-
ユーザーエージェントが、後続のナビゲーションに必要となる可能性のあるターゲットリソースを先取りして取得し、キャッシュすることを指定します。 詳しくは先読みを参照してください。
preload
-
ユーザーエージェントが、
as
属性(および対応する出力先に関連付けられた優先度)によって指定された潜在的な出力先に従って、現在のナビゲーションの対象となるリソースを先行して取得し、キャッシュしなければならないことを指定します。preload
値のページを参照してください。 prerender
非推奨; 非標準-
ユーザーエージェントが対象リソースを先取りして取得し、そのサブリソースの取得やレンダリングの実行など、将来的に高速なレスポンスを提供することを支援する方法で処理することを指定します。
prev
-
next
キーワードと同様に、<form>
,<link>
,<a>
,<area>
に関連するprev
の値は、現在の文書が一連の文書の一部であり、このリンクが一連の文書内の直前の文書を参照していることを示します。メモ: 別名である
previous
は正しくないため使用しないでください。 privacy-policy
-
<a>
、<area>
、<link>
要素で有効で、privacy-policy
の値は参照する文書が現在の文書のデータ収集と使用方法を説明するプライバシーポリシーであることを示します。 search
-
<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 端末上のウェブアプリケーションのアイコンを指定します。
仕様書
Specification |
---|
HTML # linkTypes |
HTML # attr-hyperlink-rel |
HTML # attr-form-rel |
ブラウザーの互換性
html.elements.link.rel
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
rel | ||||||||||||
rel="alternate stylesheet" | ||||||||||||
rel=dns-prefetch | ||||||||||||
rel=expect | ||||||||||||
rel=icon | ||||||||||||
rel=manifest | ||||||||||||
rel=modulepreload | ||||||||||||
rel=preconnect | ||||||||||||
rel=prefetch | ||||||||||||
rel=preload | ||||||||||||
as=fetch | ||||||||||||
as=font | ||||||||||||
as=image | ||||||||||||
as=script | ||||||||||||
as=style | ||||||||||||
as=track | ||||||||||||
rel=prerender |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Non-standard. Check cross-browser support before using.
- Deprecated. Not for use in new websites.
- See implementation notes.
- User must explicitly enable this feature.
- Has more compatibility info.
html.elements.a.rel
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
rel | ||||||||||||
noopener | ||||||||||||
noreferrer |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.
html.elements.area.rel
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
rel | ||||||||||||
noopener | ||||||||||||
noreferrer |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.
html.elements.form.rel
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
rel |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support