The HTML rel attribute is a relationship label for links. It helps browsers and search engines understand what a link means—such as security for new tabs, SEO link qualifiers, and resource hints like preload or preconnect.
rel は、リンク先と「いま見ているページ」の関係（relationship）を伝えるための属性です。ざっくり言うと、リンクに「これは何のためのリンク？」という札（ラベル）を付けるイメージです。
同じURLへのリンクでも、rel の指定が違うと安全性（別タブ対策）や検索エンジンへの伝わり方、そして読み込みの最適化（先読み）まで変わることがあります。
rel は「リンクの目的スイッチ」rel は “関係ラベル”rel の値は、リンク先そのものではなく「リンク先とこのページの関係」を表します。
だから href が「どこへ？」なら、rel は「何のために？」です。
rel="noopener noreferrer" のように、必要なラベルを組み合わせられます。
（中級者以上ほど、この“複数指定できる”のが効いてきます）
rel は要素によって意味の重みが変わる<a> の rel は主に「リンククリック時の扱い」や「性質ラベル」。
<link> の rel は主に「外部リソース宣言（CSS、アイコン、先読みなど）」のスイッチになります。
覚え方：href = 行き先、rel = 関係（目的ラベル）。
<a>（クリックして移動するリンク）noopener/noreferrer）や、SEO向けの性質ラベル（sponsored/ugc/nofollow）が代表です。
<area>（イメージマップ）<a> とほぼ同じ考え方で、リンク先との関係を付けられます。
<link>（head内の外部リソース宣言）stylesheet / icon / canonical / preload / preconnect など、
「このページが使う外部リソース」を宣言します。
<form>rel を持てるケースがあります。
まずは <a> と <link> を押さえるだけで十分です。
noopener / noreferrer初心者がいちばん役に立ちやすいのが、target="_blank" とセットで使う rel です。
rel="noopener"（別タブ安全対策）window.opener 経由で触れないようにします。
ざっくり言うと「別タブ先に、元ページを操作させない」ための安全策です。
rel="noreferrer"（参照元URLを渡さない）noreferrer は実質的に noopener 相当の効果も含む、と整理されることが多いです。
HTML
<a href="https://example.com" target="_blank" rel="noopener">
外部サイト（安全に別タブ）
</a>「外部リンク＋別タブ」なら、迷ったら rel="noopener" を付けておく、で事故が減ります。
HTML
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
参照元も渡さない（計測に影響する場合あり）
</a>実務メモ：noreferrer はアクセス解析で「どこから来たか」が取れなくなることがあるので、サイト内リンクに乱用はしないほうが安全です。
sponsored / ugc / nofollowこれらは「このリンクはどういう性質のリンクか」を検索エンジン等に伝えるためのラベルです。ここを正しく付けると、運用が増えても整理しやすくなります。
rel="sponsored"（広告・PR・アフィリエイト等）rel="ugc"（User Generated Content）ugc を使う価値が上がります。
rel="nofollow"ugc/sponsored と併用されることもよくあります。
HTML
<!-- 広告・PR枠 -->
<a href="https://sponsor.example.com" rel="sponsored">
スポンサーリンク
</a>
<!-- コメント欄など（UGC） -->
<a href="https://user-link.example.com" rel="ugc nofollow">
ユーザー投稿リンク
</a>コツ：「どれを付けるべきか迷う」より、そのリンクの立場を正直にラベル付けするのが一番安全です。
<link> の rel：CSS・アイコン・正規URL・先読み<link> は “ページの外側のリソース” を宣言するための要素で、rel の値がその役割を決めます。ここは「見た目に出ないけど、裏で効く」ものが多いです。
rel="stylesheet"<head> に置きます。rel="icon" / rel="apple-touch-icon"rel="canonical"rel="preload"as の指定や、実際に使う指定とのセットが重要です。rel="preconnect"preload（CSSの典型）
HTML
<link rel="preload" href="/assets/critical.css" as="style">
<link rel="stylesheet" href="/assets/critical.css">よくある事故：preload だけ書いて満足してしまう（＝予約したのに使っていない）。予約と使用は別物なので、セットで書きます。
preconnect（CDNの典型）
HTML
<link rel="preconnect" href="https://cdn.example.com" crossorigin>crossorigin はケースによって必要になります。特にフォントやCDNが絡むときは、問題が出たらここを疑うと早いです。
rel には「2つの世界」があるここが分かると、仕様を調べるときに迷いにくくなります。
relnoopener / noreferrer / preload / preconnect など。
「ブラウザがどう動くか」が主役です。
relcanonical / alternate / next など。
「関係ラベルとして、どういう語彙があるか」が主役で、一覧の基準として IANA のレジストリが使われます。
困ったら：ブラウザ挙動を知りたいならHTML標準やMDN、関係ラベル一覧を知りたいなら IANA を見る、という切り替えが便利です。
HTML
<a href="https://example.com" target="_blank" rel="noopener">
外部サイト
</a>HTML
<a href="https://ad.example.com" rel="sponsored">
PR
</a>HTML
<a href="https://example.com" rel="ugc nofollow">
投稿されたリンク
</a>HTML
<link rel="preload" href="/assets/critical.css" as="style">
<link rel="stylesheet" href="/assets/critical.css">rel は必須ですか？<link> はほぼ必須だと思ってOKです。
rel がないと「何のリソースか」が決まらず、意味が薄くなります。
rel の値は複数指定していいですか？rel="noopener noreferrer" や rel="ugc nofollow" のように組み合わせます。
target="_blank" だけで問題ないですか？rel="noopener" を付けるのが安全です。
参照元URLも渡したくないなら noreferrer を追加します（ただし計測に影響する場合があります）。
nofollow を付けるとSEO的に不利になりますか？preload を入れれば必ず速くなりますか？target="_blank" だけ付けたrel="noopener" を検討（安全対策）。noreferrer をサイト内リンクに大量に付けたpreload を書いたのに警告が出るrel="stylesheet" 等の使用指定もセットにします。sponsored を付け忘れた（広告リンク）rel="sponsored" を付けて整理します。dofollow は慣用表現で、rel に書いて“強化”するものではありません（何も付けないのが基本）。rel の中心テーマです。rel に書く1つ1つの単語（例：stylesheet、canonical）のことです。要するに「このリンクは何のため？」を表すラベルです。rel は「単語をスペースで並べる」形式です（例：rel="noopener noreferrer"）。この“単語”のことをトークンと呼ぶことがあります。noopenertarget="_blank" で別タブを開くとき、開いた先から元ページ（window.opener）を触られないようにする安全対策のラベルです。noreferrerReferer）を送らないラベルです。アクセス解析や広告計測に影響が出る場合があります。Referrer ではなく Referer なのは歴史的な事情です。nofollowugcsponsoredcanonicalstylesheet<link rel="stylesheet" ...>）。icon / apple-touch-iconmanifestpreloadas（種類宣言）を間違えると効果が落ちたり警告が出たりします。prefetchpreconnect / dns-prefetchpreconnect はDNS解決＋接続確立まで、dns-prefetch は主にDNS解決を先に済ませます。modulepreloadtext/css、JSなら application/javascript）。scheme（http/https）＋host＋port の組み合わせです。integritycrossorigin とセットになる場面があります。canonical や nofollow 系はこの文脈で登場します。