`` アンカーリンクはどのように機能しますか？target と rel を含めて説明してください。

Question

`<a>` アンカーリンクはどのように機能しますか？target と rel を含めて説明してください。

Accepted Answer

`` (anchor) 要素はハイパーリンクを作成します。その `href` は宛先で、URL、パス、ページ内アンカー、または特別なスキームになります。 ```html External site Internal page (relative) Jump to an element with id="section2" Send email Call us ``` ## 新しいタブで開く — とセキュリティについての注意 ```html Opens in a new tab ``` `target="_blank"` は新しいタブを開きますが、**`rel="noopener"`** を追加する必要があります。これなしでは、新しいページは `window.opener` にアクセスでき、潜在的にあなたのページをリダイレクトする可能性があります（「tab-nabbing」攻撃）。`noreferrer` は referrer ヘッダーも除去します。最新のブラウザは `_blank` に対して `noopener` を暗黙的に含みますが、明示的に追加することがベストプラクティスです。 ## rel 属性は関係を伝える ```html Don't pass SEO ranking (untrusted/user links) Security: no window.opener access Paid/affiliate link ``` ## ページ内ナビゲーション ```html Back to top ...

...

``` クリックするとフラグメントと一致する `id` を持つ要素にスクロールします。 ## なぜ重要なのかアンカーはウェブのナビゲーションの骨組みです。 `href` スキーム（相対、絶対、フラグメント、`mailto`/`tel`）、`target="_blank"` + `rel="noopener"` のセキュリティペアリング、および SEO に関連する `rel` 値を理解することは、正しく安全なリンク設定に必須です。