id=id - IDの割り当て - とほほのWWW入門

要素に id で指定した識別子をつけます。<a href="..."> のジャンプ先、JavaScript/jQuery のセレクタ、<label for="..."> の対象要素などで利用されます。

class 属性は要素の種類を表すので、一つの文書の中に同じ class 属性を持つ要素が複数存在して構いませんが、id 属性は要素に固有の識別子を割り当てるため、ひとつの文書内に同じ id を持つ要素を複数記述することはできません。

id に使用できる文字は、HTML 4.x では「ハイフン(-)、アンダーバー(_)、コロン(.)、ピリオド(.)を含む半角英数文字列で、最初の1文字は半角英文字で始まる」とされていましたが、HTML5 や HTML Living Standard では「一意な文字列」とだけ定義されており、空白文字や日本語も使用できるようになりました。

使用例

<a>のジャンプ先として(同一文書)

HTML

使い方は <a href="#id134">使用例</a> を参照してください。
    :
<h5 id="id134">使用例</h5>

<a>のジャンプ先として(他文書)

HTML

詳細は id 属性の <a href="id.html#id135">使用例</a> を参照してください。

HTML

<!-- id.html -->
<h5 id="id135">使用例</h5>

スタイルシートのセレクタとして

CSS

#id136 { color:red }

HTML

<p id="id136">あいうえお</p>

JavaScript/jQueryのセレクタとして

HTML

<div id="id137">あいうえお</div>
<script>
var obj1 = document.getElementById("id137");
var obj2 = document.querySelector("#id137");
var obj3 = $("#id137");				# jQuery
</script>

ラベル要素の対象として

詳細は <label for="..."> を参照してください。

HTML

<label for="id138">住所</label>
<input id="id138" type="text" name="address">