HTML id attribute

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テストでエラーとなる。

構文

<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>

目次

  1. JavaScript
  2. 参考文献

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>

JavaScript

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

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

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

関連記事

class

dir

lang

onblur

onchange

onclick

oncontextmenu

ondblclick

onfocus

onkeydown

onkeypress

onkeyup

onmousedown

onmousemove

onmouseout

onmouseover

onmouseup

onselect

style

title

参考文献

Web Hypertext Application Technology Working Group (2022) "Semantics, structure, and APIs of HTML documents" HTML Living Standard