HTML Classes and IDs Problems related to duplicated IDs


Example

Having more than one element with the same ID is a hard to troubleshoot problem. The HTML parser will usually try to render the page in any case. Usually no error occurs. But the pace could end up in a mis-behaving web page.

In this example:

<div id="aDiv">a</div>
<div id="aDiv">b</div>

CSS selectors still work

#aDiv {
    color: red;
}

But JavaScript fails to handle both elements:

var html = document.getElementById("aDiv").innerHTML;

In this casehtml variable bears only the first div content ("a").