パスとリンク

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>

ページ内リンク

URLのパスと同様に、id属性の値（URLのフラグメント）は適切に命名してください（👉識別子の命名規則）。また、安易に削除・変更しないでください。たとえページ内リンクを使用していなかったとしても、外部からリンクされている可能性があります。id属性の値を（安易に）削除・変更すると、ユーザーにとってはリンク切れと似た状態となります。

<!-- ✅ 良い例 -->
<a href="#about">...</a>
<section id="about"></section>

<!-- ❌ 悪い例: 不適切な命名をしている -->
<a href="#foo">...</a>
<section id="foo"></section>

外部リンク

ソースコードの検索性を上げるために//で始まるパスは避け、https://で開始してください。

必要に応じて、target="_blank"やrel="noreferrer"、その他の属性を指定してください。ただし、target="_blank"を指定すると、暗黙的にrel属性にnoopenerを指定した場合と同様の挙動になるので、明示的にrel属性にnoopenerを指定する必要はありません。

<!-- ✅ 良い例 -->
<a href="https://www.d-zero.co.jp" target="_blank">...</a>

<!-- ❌ 悪い例 -->
<a href="//www.d-zero.co.jp" target="_blank">...</a>

セルフホストリソースと外部リソース

セキュリティや堅牢性のために外部リソースの読み込みは原則禁止します。CDNサーバのダウン、CDNの乗っ取り、サービス終了などの可能性があるのでできるだけセルフホストしたリソースを用います。ただし、クライアントの依頼または社内の許可がある場合に限り、外部リソースの読み込みを許容します。Google MapsやGoogle Fonts、その他ASPなどセルフホスト不可能なリソースはこの限りではありません。

<!-- ✅ 良い例 -->
<script src="/path/to/script.js"></script>
<link rel="stylesheet" href="/path/to/style.css" />

<!-- ❌ 悪い例 -->
<script src="https//www.example.com/script.js"></script>
<link rel="stylesheet" href="https//www.example.com/style.css" />