HTML の id 属性

HTMLタグのid属性には、要素の識別子 (identifier) を指定する。

IDとは

HTMLにおけるIDとは、HTML文書に含まれるたくさんの要素の中から、特定の要素を一意に特定するための識別子である。要素を特定するためにIDは固有であり、ひとつのHTML文書の中で同じIDを持つ複数の要素が重複してはならない。

スタイルシートで識別子セレクタを用いることにより、特定の要素に対してスタイルを指定することができます。また、a要素のhref属性にジャンプ先として識別子を指定することができます。id属性は省略可能です。

命名規則

HTMLのIDは、数字だけ、数字で始まる、アンダースコアで始まる、句読点だけで構成されるなど、どのような形式であっても構わないが、空白を含むことはできない。

HTMLのIDが重複するとどうなる？

HTMLのIDを重複させることは禁止されている。そのため、IDが重複したときにどうなるかは仕様で決められていない。仕様で明確に決められていないため、Webブラウザの種類やWebブラウザのバージョンによって動作が異なる。

IDとCLASSの違い

同じIDをもつ複数の要素が存在しないのに対して、CLASSは同じクラス名を持つ複数の要素があってもよい。

AMPの制限

AMP (Accelerated Mobile Pages) の場合、HTML要素のid属性に次に示す値を指定すると、The AMP Validator や AMPテストでエラーとなる。

GETATTRIBUTE
TOSTRING
VALUEOF

構文

<tag id="example">

グローバル属性

idはHTMLにおける全ての要素に指定できるグローバル属性である。

省略可能

全ての要素において、id属性の指定は省略できる。

サンプル

個々のinput要素に固有のidを付けて、それぞれのラベルをidで指定するサンプルを次に示す。

<fieldset>
  <legend>口座種別</legend>
  <input type="radio" name="account" id="savings" checked>
  <label for="savings">普通預金</label>
  <input type="radio" name="account" id="checking">
  <label for="checking">当座預金</label>
</fieldset>

口座種別普通預金当座預金

リンク先の要素にidを指定して、リンク先をidで指定するサンプルを次に示す。

<p>目次</p>
<ol>
  <li>
    <a href="#JAVASCRIPT">JavaScript</a>
  </li>
  <li>
    <a href="#REFERENCES">参考文献</a>
  </li>
</ol>
<h2 id="JAVASCRIPT">JavaScript</h2>
<h2 id="REFERENCES">参考文献</h2>

JavaScript
参考文献

CSS

HTML要素にid属性を指定しておけば、CSSのセレクタ #id でその要素を特定することができる。

<head>
  #li2 {
    color: red
  }
</head>
<body>
  <ul>
    <li id="li1">first</li>
    <li id="li2">second</li>
    <li id="li3">third</li>
  </ul>
</body>

first
second
third

JavaScript

HTML要素にid属性を指定しておけば、JavaScriptからその要素を特定することができる。

JavaScriptからid属性を用いて要素を特定するには、次に示す方法がある。

document.getElementById(id)
document.querySelector('#id')

<ul>
  <li id="li1">first</li>
  <li id="li2">second</li>
  <li id="li3">third</li>
</ul>
<script>
  document.getElementById('foo').style.color = 'red';
  document.querySelector('#baz').style.color = 'green';
</script>