このページについて
このページではHTMLで使えるrel属性の機能と使い方の解説をしています。
rel属性
rel属性はaタグ、areaタグ、linkタグ、formタグの4種で使う事ができます。rel属性は「現在のドキュメントとリンクされたドキュメントやリソースの関係を指定する機能」を持っています。
関係の指定内容についてはそれぞれのタグごとで異なるんですが、それぞれ書いていきます。
aタグ
| alternate | 文書の代替え表現へのリンクを提供する(印刷・翻訳・ミラーリングなど) |
|---|---|
| author | 文書の作者へのリンク |
| bookmark | ブックマークに使用される永続的なURL |
| external | 参照された文書が現在のドキュメントと同じサイトの一部では無い事を示す |
| help | ヘルプドキュメントへのリンク |
| license | 文書のライセンス情報へのリンク |
| next | シリーズの次のドキュメントのリンク |
| nofollow | 有料リンク、未認証な文書へのリンクに使用 これはGoogleのbotに来て欲しく無いページに使用する |
| noopener | 元の文書へのアクセスを新しい閲覧コンテキストに許可しない |
| noreferrer | リファラを不明にし、ユーザーがリンクをクリックしてもリファラヘッダーが含まれないようにする |
| prev | 選択した文書の前の文書 |
| search | 文書の検索ツールへのリンク |
| tag | 現在の文書タグ(キーワード) |
areaタグ
| alternate | 文書の代替え表現へのリンクを提供する(印刷・翻訳・ミラーリングなど) |
|---|---|
| author | 文書の作者へのリンク |
| bookmark | ブックマークに使用される永続的なURL |
| help | ヘルプドキュメントへのリンク |
| license | 文書のライセンス情報へのリンク |
| next | シリーズの次のドキュメントのリンク |
| nofollow | 有料リンク、未認証な文書へのリンクに使用 これはGoogleのbotに来て欲しく無いページに使用する |
| noreferrer | リファラを不明にし、ユーザーがリンクをクリックしてもリファラヘッダーが含まれないようにする |
| prefetch | ターゲットドキュメントをキャッシュする |
| prev | 選択した文書の前の文書 |
| search | 文書の検索ツールへのリンク |
| tag | 現在の文書タグ(キーワード) |
linkタグ
| alternate | 文書の代替え表現へのリンクを提供する(印刷・翻訳・ミラーリングなど) |
|---|---|
| author | 文書の作者へのリンク |
| dns-prefetch | ブラウザがターゲットリソースのオリジンに対してDNS解決を強制的に実行するように指定 |
| help | ヘルプドキュメントへのリンク |
| icon | 文書を表すアイコンをインポートする |
| license | 文書のライセンス情報へのリンク |
| next | シリーズの次のドキュメントのリンク |
| pingback | 現在のドキュメントへのpingbackを処理するpingbackサーバーのアドレスを提供 |
| preconnect | ブラウザがターゲットリソースのオリジンに強制的に接続することを指定する |
| prefetch | ターゲットドキュメントをキャッシュする |
| preload | ブラウザエージェントはas属性で指定された宛先に従って、現在のナビゲーションのターゲットリソースを先制的にフェッチしてキャッシュする必要があることを指定する |
| prerender | ブラウザが指定されたウェブページをバックグラウンドで事前に読み込むように指定します。 ただしユーザーの帯域幅を浪費するため、ユーザーに対して必ず必要と判断できる場合のみ使う |
| stylesheet | 外部スタイルシートを読み込む時に使用します。 |
formタグ
| external | 参照された文書が現在のドキュメントと同じサイトの一部では無い事を示す |
|---|---|
| help | ヘルプドキュメントへのリンク |
| license | 文書のライセンス情報へのリンク |
| next | シリーズの次のドキュメントのリンク |
| nofollow | 有料リンク、未認証な文書へのリンクに使用 これはGoogleのbotに来て欲しく無いページに使用する |
| noopener | 元の文書へのアクセスを新しい閲覧コンテキストに許可しない |
| noreferrer | リファラを不明にし、ユーザーがリンクをクリックしてもリファラヘッダーが含まれないようにする |
| prev | 選択した文書の前の文書 |
| search | 文書の検索ツールへのリンク |
relの書き方
使える値はそれぞれで異なりますが、書き方は全て同じです。
<a href="リンク先URL" rel="nofollow">リンク先</a>
<map name="画像の名前">
<area shape="形" coords="座標" alt="代替えテキスト" href="画像URL" rel="alternete">
</map>
<link rel="stylesheet" href="スタイルシートのURL">
<form rel="nofollow"> </form>ちなみにですがnoopenerに関してですが、基本的にtargetで_blankを使う場合はrelでnoopenerを使うとセキュリティ的によろしいようです。リンク先のサイトでJavaScriptなりを使えばリンク元を操作する事が可能になる脆弱性があるようで、そうならないようにnoopenerを使いましょうって感じです。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。