id=id - IDの割り当て

• トップ
• HTMLリファレンス
• id=id

属性

<tagName id=id> - 要素に識別子(ID)をつける

サポート

https://caniuse.com/mdn-html_global_attributes_id

説明

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

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

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

使用例

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

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

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

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

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

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

#id136 { color:red }

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

JavaScript/jQueryのセレクタとして

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

ラベル要素の対象として

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

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

関連項目

class=class、 name=name

リンク

• https://html.spec.whatwg.org/multipage/dom.html#global-attributes:the-id-attribute-2
• https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/id
• https://caniuse.com/mdn-html_global_attributes_id

---