HTMLのid属性に指定できる有効な値とは？HTML4とHTML5の違いを解説

HTMLにおけるid属性に指定できる有効な値は、HTML4とHTML5で仕様が大きく異なります。それぞれのバージョンにおけるルールを詳しく見ていきましょう。

HTML5の場合

HTML5では、id属性の値に関する制限が大幅に緩和されています。主なルールは以下のとおりです。

• 空白文字は使用できない：属性値の中にスペースを含めることはできません。
• 空文字列は禁止：値は空ではなく、必ず1文字以上を含む必要があります。

つまり、数字で始まる値や記号を含む値でも、空白さえなければHTML5としては有効です。

<p id="test">これはサンプルテキストです。</p>
<p id="#test">これはサンプルテキストです。</p>

なお、実務上はCSSセレクターやJavaScriptでの扱いやすさを考慮し、英字から始まり、ハイフン（-）やアンダースコア（_）で単語をつないだ命名にするのが一般的です。

HTML4の場合

一方、HTML4ではより厳格なルールが定められています。IDおよびNAMEトークンは、次の形式に従う必要があります。

• 先頭の文字は必ず英字（[A-Za-z]）でなければなりません。
• 2文字目以降には、任意の数の英字・数字（[0-9]）・ハイフン（-）・アンダースコア（_）・コロン（:）・ピリオド（.）を使用できます。

そのため、HTML4では「123item」のように数字で始まるidは無効であり、注意が必要です。

補足：id属性の重要なポイント

バージョンに関わらず、id属性は同一ドキュメント内で一意（重複しない）であることが求められます。同じidを複数の要素に付与すると、CSSやJavaScriptの動作に不具合が生じる可能性があります。要素を繰り返しスタイル付けしたい場合は、class属性を使用しましょう。