HTML要素を識別する正しい方法: 仕様に準拠し、保守性を高める

HTML要素は複数のIDを持つことができるのか？

仕様

The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's document.

つまり、id 属性は要素のユニークな識別子であり、ドキュメント内のすべてのIDの中でユニークである必要があるということです。

問題点

1つの要素に複数のIDを指定すると、以下の問題が発生します。

• 仕様違反: HTMLの仕様に違反するため、ブラウザによっては正しく動作しない可能性があります。
• JavaScriptの誤動作: JavaScriptでIDを基に要素を取得する際、意図しない要素が取得されてしまう可能性があります。
• 保守性の低下: コードの読みやすさや理解しやすさが低下し、保守性が悪くなります。

代替案

1つの要素に複数のIDを持たせたい場合は、以下の代替案があります。

• クラス属性を使用する: class 属性は要素に複数の識別子を付与するために使用できます。
• 要素の階層構造を利用する: 要素の階層構造を利用することで、要素を特定することができます。
• JavaScriptを使用する: JavaScriptを使用して、要素に独自IDを付与することができます。

HTML要素は複数のIDを持つことはできないため、代替案を利用する必要があります。

<div id="id1 id2">
  This is a div.
</div>

正しい例としては、以下のいずれかの方法が考えられます。

class 属性を使用する

<div class="class1 class2">
  This is a div.
</div>

要素の階層構造を利用する

<div>
  <div id="id1">
    This is a div.
  </div>
</div>

JavaScriptを使用する

<div id="id1">
  This is a div.
</div>

<script>
const element = document.getElementById("id1");
element.dataset.id2 = "id2";
</script>

上記以外にも、さまざまな代替案があります。

重要なのは、HTMLの仕様を理解し、適切な方法で要素を識別することです。

HTML要素を識別する他の方法

data-* 属性は、カスタムデータ属性を要素に付与するために使用できます。

<div data-id="id1" data-type="button">
  This is a button.
</div>

ARIA 属性は、アクセシビリティのために要素に情報を付与するために使用できます。

<button aria-label="Submit">
  Submit
</button>

CSS セレクタは、スタイルシートで要素を選択するために使用できます。

#id1 {
  color: red;
}

.class1 {
  font-size: 16px;
}

JavaScriptを使用して、要素を識別したり、操作したりすることができます。

const element = document.getElementById("id1");
element.style.backgroundColor = "blue";