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