What are the side effects of using multiple instances of a single id name in HTML?

Question

Just curious to find out exactly what problems I'll cause myself if I include multiple elements in my web-page with the same id?

for example:

<div id='someID'>Some Content</div>
<div id='someID'>Some Other Content</div>

Answer 1

When you try and reference those elements from JavaScript it won't be able to resolve which element you are referring to. Depending on the specific JavaScript interpreter you are running on, you may either get errors, or undefined behaviour - both cases are undesirable.

The HTML spec states that Id's should be unique, so your HTML will be considered as invalid and may cause browsers to drop back into quirks mode rendering, or even totally refuse to render your page (although that's not likely, and all current browsers will render something - technically, if you don't follow the spec the browser is under no obligation to do anything but reject your page).

You should consider using class names instead if you want something to identify multiple elements by:

<div class="someClass">Some Content</div>
<div class="someClass">Some Other Content</div>

---

Blair has pointed out in the comments below that if you need to search for elements by class from JavaScript, you can speed the search up by going from the nearest element with an ID and also tell it what node type to look for. This can keep the access speed fast in a lot of cases, but doesn't break any rules on duplicate id's:

HTML:
<div id="myNearestID">
    <div class="someClass">Some Content</div>
    <div class="someClass">Some Other Content</div>
</div>

JavaScript+JQuery:
$('#myNearestID div.someClass')

Answer 2

IE will have major problems with any javascript using IDs, that's the main side-effect.

Overall, IDs are unique, per the spec...the browser maker is free to make this assumption in their code, and any bugs (Javascript, CSS, etc) that result from invalid HTML involving them...well, that's your problem :)

The browser isn't obligated to fix it really, and I don't think they should either.

Answer 3

I’m not sure how browsers render the CSS rules of type #someID in such case (they will probably apply the rule to all such elements), but you’ll certainly run in trouble with JavaScript and getElementById.

Answer 4

I read elsewhere that IE creates a global variable for each element with an ID.

Am I wrong in saying that's an issue too?

Answer 5

A couple more points not already noted.

Fragment identifiers: How would the browser handle a link to http://www.example.com#someID ?

Internal references : If someID was on two input elements, and you had <label for="someID">... if the user clicked on the label, the browser would have to decide which input should receive focus. (In HTML5, this is defined to be the first input, which is not necessarily what you want). Likewise for ARIA support, some attributes such as aria-labelledby and aria-describedby rely on pointing to a single place.