【HTML Living Standard】rel属性の使い方
rel属性の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
relプロパティは、HTMLの<a>、<link>、<area>といった要素において、当該要素が参照する他のリソースとの関係性を定義する値を保持するプロパティです。このプロパティは、主にリンク先のドキュメントや外部リソースが、現在のドキュメントに対してどのような役割や関係性を持つかを示すために使用されます。
たとえば、<link rel="stylesheet" href="style.css"> の場合、rel="stylesheet"は、参照先のstyle.cssが現在のドキュメントのスタイルシートであることをブラウザに伝えます。これにより、ブラウザはスタイルシートとして認識し、適切に読み込んで適用します。同様に、<link rel="icon" href="favicon.ico">では、favicon.icoがウェブサイトのアイコンであることを示します。
その他にも、<link rel="preload" href="script.js">のように、将来的に必要となるリソースを事前に読み込むことをブラウザに指示したり、<a rel="alternate" href="ja.html" hreflang="ja">のように、代替言語バージョンのドキュメントを示す用途があります。また、検索エンジンのクローラーに対して特定のリンクをたどらないよう指示するrel="nofollow"や、セキュリティ上の理由から新しいウィンドウで開かれたページからの情報漏洩を防ぐrel="noopener"、rel="noreferrer"などの値も広く利用されています。
このプロパティを使用することで、ブラウザ、検索エンジン、およびその他のツールがリンクや関連リソースの意図を正確に理解し、それに応じて適切な処理を実行できるようになります。これにより、ページのレンダリング効率の向上、検索エンジン最適化（SEO）の改善、セキュリティの強化、そしてユーザーエクスペリエンスの向上が期待できます。
構文(syntax)
1<link rel="stylesheet" href="style.css">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTMLのrel属性で関係性を示す
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>rel属性のサンプルコード</title> 7 <!-- 8 rel属性は、現在のドキュメントとリンク先のリソース（ファイル）との関係性を示します。 9 ここでは、外部スタイルシートとファビコンを関連付ける一般的な使い方を示しています。 10 --> 11 12 <!-- rel="stylesheet": このリンクがスタイルシートであることを示し、外部CSSファイルを読み込みます。 --> 13 <link rel="stylesheet" href="style.css"> 14 15 <!-- rel="icon": このリンクがドキュメントのアイコン（ファビコン）であることを示し、ブラウザのタブなどに表示されます。 --> 16 <link rel="icon" href="favicon.ico" type="image/x-icon"> 17</head> 18<body> 19 <h1>rel属性の基本的な使い方</h1> 20 <p> 21 このHTMLファイルでは、<code_tag><head></code_tag>タグ内でrel属性を使って、 22 外部CSSファイル（<code_tag>style.css</code_tag>）とファビコン（<code_tag>favicon.ico</code_tag>）を関連付けています。 23 </p> 24 <p> 25 rel属性の値（例: "stylesheet", "icon"）によって、リンク先のファイルが現在のHTMLドキュメントにとって 26 どのような役割を持つのかをブラウザに伝えます。 27 </p> 28</body> 29</html>
HTMLのrel属性は、現在のHTMLドキュメントと、<link>タグなどで指定される外部のリソース（ファイル）との間にどのような関係があるかを示す属性です。この属性は主に<link>タグで利用され、ウェブページを構成する上で不可欠な外部ファイルを適切に読み込むために使用されます。
サンプルコードでは、2つの一般的な使用例を示しています。まず、rel="stylesheet"と指定することで、style.cssファイルがこのドキュメントのスタイルシートであることをブラウザに伝えています。これにより、ブラウザはそのCSSファイルを読み込み、ウェブページの見た目を整えます。次に、rel="icon"と指定することで、favicon.icoファイルがウェブサイトのアイコンであることを示し、ブラウザのタブやブックマークなどに表示されるようになります。
rel属性自体は引数を取らず、特定のキーワード（属性値）を設定することで、リンク先のファイルの役割をブラウザに明確に指示します。戻り値もありません。このように属性値によって、ブラウザは外部ファイルを正しく解釈し、ウェブページ上で意図した通りに表示・機能させることができます。システムエンジニアの初心者の方にとって、HTMLドキュメントがどのように外部リソースと連携しているかを理解する上で重要な要素の一つです。
rel属性は、現在のHTMLドキュメントとリンク先の外部リソース（ファイル）との関係性をブラウザに正確に伝えるための重要な属性です。指定する値（例: stylesheet, icon）が一つでも異なると、ブラウザがリソースを正しく認識・適用できず、スタイルが適用されない、アイコンが表示されないなどの問題が発生しますので注意が必要です。
主に<head>タグ内の<link>要素で使用され、href属性で指定するファイルが現在のドキュメントにとってどのような役割を持つかを定義します。正しく設定することで、ウェブページの機能や見た目を意図通りに実現できます。利用する値はW3Cの仕様で定義されており、用途に応じて適切な値を調べて用いることが大切です。
HTMLのrel="noopener"属性でリンクを安全にする
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>rel="noopener" 属性のサンプル</title> 7</head> 8<body> 9 <h1>rel="noopener" 属性の使用例</h1> 10 11 <p> 12 <code>target="_blank"</code> を使用して新しいタブやウィンドウでリンクを開く際、<br> 13 セキュリティ上の脆弱性を防ぐため、<code>rel="noopener noreferrer"</code> 属性を必ず追加することが推奨されます。 14 </p> 15 16 <!-- rel="noopener noreferrer" を含む推奨されるリンク --> 17 <p> 18 <a href="https://example.com" target="_blank" rel="noopener noreferrer"> 19 安全な外部サイトへのリンク 20 </a> 21 <!-- 22 noopener: 新しいタブで開かれたページから、元のページ (このページ) のJavaScriptへのアクセスを防ぎます。 23 これにより、フィッシングなどのセキュリティ攻撃を防ぎます。 24 noreferrer: 新しいタブへの移動時に、元のページの情報 (HTTPリファラーヘッダー) を送信しません。 25 プライバシー保護とセキュリティの向上に役立ちます。 26 --> 27 </p> 28 29 <p> 30 比較のために、<code>rel="noopener noreferrer"</code> を含まない非推奨のリンクです。 31 </p> 32 33 <!-- rel="noopener noreferrer" を含まない非推奨のリンク (セキュリティリスクあり) --> 34 <p> 35 <a href="https://insecure-example.org" target="_blank"> 36 非推奨の外部サイトへのリンク 37 </a> 38 </p> 39</body> 40</html>
HTMLのrel属性は、リンク先の文書と現在の文書との関係性を示すものです。特に、target="_blank"を用いてリンクを新しいタブやウィンドウで開く場合、開かれたページから元のページにアクセスできるセキュリティ上の脆弱性が発生する可能性があります。この脆弱性を防ぐため、rel="noopener noreferrer"属性の追加が強く推奨されます。
noopenerは、新しく開かれたタブから元のページ（リンク元）へのJavaScriptアクセスを制限し、悪意のあるサイトが元のページを操作するフィッシングなどの攻撃を防ぐ役割があります。これにより、元のページの安全性が保たれます。
一方、noreferrerは、新しいタブへの遷移時に、元のページのURL情報（HTTPリファラーヘッダー）を送信しないようにします。これは、リンク先のサイトに自身の閲覧履歴を伝えないことでユーザーのプライバシー保護に貢献し、また、リファラー情報を使った一部のセキュリティ攻撃を防ぐ役割も果たします。
サンプルコードでは、target="_blank"と併せてrel="noopener noreferrer"を適用することで、ユーザーが安全に外部サイトへ移動できる推奨されるリンクの記述方法を示しています。この記述は、システムエンジニアを目指す上で知っておくべき重要なセキュリティ対策の一つです。
target="_blank"を使って外部サイトへのリンクを新しいタブで開く際は、セキュリティとプライバシー保護のため、必ずrel="noopener noreferrer"属性を併記してください。
この属性は、開かれた新しいタブのページが元のページに悪影響を与えるのを防ぐ重要な役割を持ちます。noopenerは、新しいタブから元のページへのJavaScriptによるアクセスを防ぎ、フィッシング詐欺などのセキュリティリスクを軽減します。また、noreferrerは、新しいタブへ移動する際に、元のページのURL情報（HTTPリファラー）が送信されるのを停止し、ユーザーのプライバシーを保護します。
これらの属性を省略すると、セキュリティ上の脆弱性が生じる可能性があるため、外部サイトへのリンクには常にrel="noopener noreferrer"をセットで利用することを強く推奨します。安全なWebサイト構築の基本として常に意識しましょう。