パスとリンク

href や src 属性に記述するパスは、原則 / (スラッシュ)で始まるルート相対パスで記述します。 これは CMS などの動的に生成されるページでも、どの階層からでも同じリンク先を参照できるようにするためです。

ただし、ファイルが設置されるディレクトリ構成やプロジェクトのビルド・デプロイ方式によっては、推奨されるパスの書き方が異なる場合があります。
その場合は、プロジェクトのルールや運用方針に従って記述してください。

<!-- ✅ 良い例 -->
<a href="/path/to/link">...</a>

<!-- ❌ 悪い例 -->
<a href="path/to/link">...</a>
<a href="./path/to/link">...</a>
<a href="../path/to/link">...</a>

ページ内リンク

ページ内リンク（アンカーリンク）を設定する場合は、#id名 を使って対象要素の id 属性と一致させてください。
id 属性はページ内で一意となるように命名します。

命名規則

• 英小文字、数字、ハイフン（-）を使用し、単語はハイフンで区切る（例：section-about）
• 先頭は英字で始める
• 意味が分かる名前を付ける
• ページ内で重複しないようにする

<!-- ✅ 良い例 -->
<a href="#section-about">Aboutセクションへ</a>
...
<section id="section-about">...</section>

<!-- ❌ 悪い例 -->
<a href="#SectionAbout">Aboutセクションへ</a>
...
<section id="SectionAbout">...</section>
<!-- キャメルケースや大文字は避ける -->

<a href="#123about">Aboutセクションへ</a>
...
<section id="123about">...</section>
<!-- 先頭を数字にしない -->

外部リンク

target="\_blank" を <a>、<area>、<form> 要素に設定すると、暗黙的に rel の動作が rel="noopener" を設定した場合と同様になるので、rel 属性「noopener」の指定は不要です。

rel="noreferrer"は「遷移先にリファラー情報を渡さない」という明確な用途であれば単独で指定してください。

参考リソース

• MDN rel="noopener"