May 1st,2016
“rel”属性
＃
＃
使用できる要素
“rel”属性
| 要素 | 説明 |
|---|---|
| <a> | 現在の文書から見たリンク先との関係 |
| <area> | 現在の文書から見たリンク先との関係 |
| <link> | 現在の文書から見たリンク先との関係 |
| <form> | 現在の文書から見たリンク先との関係 |
“a”要素と“area”要素、“form”要素では“rel”属性はリンク先の文書と現在の文書との関係性を参考情報として伝えます。
“rev”属性
“rel”属性とは逆にリンク先から見た現在の文書との関係を示す“rev”属性が“a”要素と“link”要素の属性として定義されていましたが、現行の仕様であるHTML Living Standardでは廃止されており、使用することはできません。
リンクタイプ
＃
リンクタイプとは？
“rel”属性の値はあらかじめ定義されている“リンクタイプ”を使用して指定します。リンクタイプは文書と他の文書、もしくは文書と外部リソースの関係を表します。
リンクタイプごとに指定できる要素が決められており、それ以外の要素に指定してはいけません。また、リンクタイプは空白文字で区切ることで複数指定することができます。
＃
リンクタイプの一覧
HTMLの仕様で定義されているリンクタイプ
| リンクタイプ | 説明 | 指定できる要素 | “body-ok” | ||
|---|---|---|---|---|---|
| alternate | リンク先は現在の文書の代替文書 | <link> | <a> <area> |
No | |
author |
リンク先は著者情報 | <link> | <a> <area> |
No | |
| bookmark | リンク先は最も近い祖先セクションへのパーマリンク | <a> <area> |
- | ||
canonical |
リンク先が類似する文書の中で最も推奨される文書 | <link> | No | ||
| dns-prefetch |
リンク先のDNSによる名前解決を事前に行う | <link> | Yes | ||
external |
リンク先は現在の文書があるウェブサイトの外部 | <a> <area> |
<form> | - | |
| help | リンク先は詳細なヘルプを提供する文書 | <link> | <a> <area> |
<form> | No |
| icon |
リンク先は現在の文書を表すアイコン | <link> | No | ||
| license |
リンク先はライセンス情報を説明する文書 | <link> | <a> <area> |
<form> | No |
| manifest |
リンク先はウェブアプリマニフェスト | <link> | No | ||
| modulepreload |
リンク先のモジュールスクリプトを先行して読み込む | <link> | Yes | ||
| next | リンク先は一連の文書の中で現在の文書の次の文書 | <link> | <a> <area> |
<form> | No |
| nofollow |
リンク先は現在の文書の著者が推奨するものではない | <a> <area> |
<form> | - | |
| noopener |
リンク先を新しいブラウジング・コンテキストで開き、リンク先が現在の文書へアクセスできないようにする | <a> <area> |
<form> | - | |
| noreferrer |
リンク先を読み込む時に現在の文書のURLを含むリファラーを送信しない | <a> <area> |
<form> | - | |
| opener |
リンク先を新しいブラウジング・コンテキストで開いた時にリンク先が現在の文書へアクセスできるようにする(暗黙的に“rel="noopener"”が適用されるのを防ぐ) | <a> <area> |
<form> | - | |
| pingback |
リンク先は現在の文書のピンバックを扱うピンバックサーバー | <link> | Yes | ||
| preconnect |
リンク先への接続を事前に確立する | <link> | Yes | ||
| prefetch |
リンク先を事前に取得する | <link> | Yes | ||
| preload |
リンク先を先行して読み込む | <link> | Yes | ||
| prev | リンク先は一連の文書の中で現在の文書の前の文書 | <link> | <a> <area> |
<form> | No |
| search |
リンク先現在の文書と関連する文書内を検索するための機能 | <link> | <a> <area> |
<form> | No |
| stylesheet | リンク先は現在の文書に適用する外部スタイルシート | <link> | Yes | ||
| tag |
リンク先は現在の文書に適用するタグを表すURL | <a> <area> |
No | ||
過去に定義されていたリンクタイプ
| リンクタイプ | 説明 | 指定できる要素 | “body-ok” | ||
|---|---|---|---|---|---|
appendix |
リンク先の文書は文書の集まりの付録 | <link> | <a> <area> |
No | |
| chapter |
リンク先の文書は文書の集まりの章 | <link> | <a> <area> |
No | |
| contents |
リンク先は目次 | <link> | <a> <area> |
No | |
| copyright |
リンク先は現在の文書の著作権情報 | <link> | <a> <area> |
No | |
| glossary |
リンク先は現在の文書が関連する用語の用語集 | <link> | <a> <area> |
No | |
| index |
リンク先は現在の文書の索引 | <link> | <a> <area> |
No | |
| prerender |
リンク先を事前に取得してレンダリングする | <link> | Yes | ||
| section |
リンク先の文書は文書の集まりの節 | <link> | <a> <area> |
No | |
| serviceworker |
リンク先は登録するService Worker | <link> | No | ||
| start |
リンク先は一連の文書の中で最初の文書 | <link> | <a> <area> |
No | |
| subsection |
リンク先の文書は文書の集まりの項 | <link> | <a> <area> |
No | |
その他のリンクタイプ
リンクタイプは仕様書に定義されている標準のリンクタイプ以外にも拡張として登録されているリンクタイプを使用することが認められています。以下はそのうちの広く使用されているものです。
| リンクタイプ | 説明 | 指定できる要素 | “body-ok” | ||
|---|---|---|---|---|---|
| apple-touch-icon | リンク先は現在の文書のウェブクリップアイコン | <link> | No | ||
| apple-touch-icon-precomposed | リンク先は現在の文書のウェブクリップアイコン(古いバージョンのiOSではアイコンの光沢が無効) | <link> | No | ||
| mask-icon | リンク先はSafariのページピン用のアイコン | <link> | No | ||
＃
使用例
文書の翻訳版を示す
文書の翻訳版を示す
<link rel="alternate" href="en/sample.html" hreflang="en">
リンク先が文書の翻訳版であることを示す
<a href="en/sample.html" rel="alternate" hreflang="en">リンク</a>
“hreflang”属性で示された言語での翻訳版を示します。
別のデバイス向けの文書を示す
<link rel="alternate" href="m/sample.html" media="handheld">
“media”属性で示されたデバイス向けの代替文書を示します。
文書のアイコンを示す
<link rel="icon" type="image/png" href="favicon.png">
文書の外部スタイルシートを示す
<link rel="stylesheet" href="style.css">
属性値に“alternate”を併用すると代替スタイルシートを指定することができます。対応するブラウザではユーザーが任意にスタイルシートを切り替えることができます。この場合“title”属性でのスタイルシート名の指定が必要です。
<link rel="stylesheet" href="style-a.css" title="標準スタイル">
<link rel="stylesheet alternate" href="style-b.css" title="代替スタイル">
