Why is it a bad thing to have multiple HTML elements with the same id attribute?

Question

Why is it bad practice to have more than one HTML element with the same id attribute on the same page? I am looking for a way to explain this to someone who is not very familiar with HTML.

I know that the HTML spec requires ids to be unique but that doesn't sound like a convincing reason. Why should I care what someone wrote in some document?

The main reason I can think of is that multiple elements with the same id can cause strange and undefined behavior with Javascript functions such as document.getElementById. I also know that it can cause unexpected behavior with fragment identifiers in URLs. Can anyone think of any other reasons that would make sense to HTML newbies?

Answer 1

Based on your question you already know what w3c has to say about this:

The id attribute specifies a unique id for an HTML element (the id attribute value must be unique within the HTML document).

The id attribute can be used to point to a style in a style sheet.

The id attribute can also be used by a JavaScript (via the HTML DOM) to make changes to the HTML element with the specific id.

The point with an id is that it must be unique. It is used to identify an element (or an anything: if two students had the same student id schools would come apart at the seems). It's not like a human name, which needn't be unique. If two elements in an array had the same index, or if two different real numbers were equal... the universe would just fall apart. It's part of the definition of identity.

You should probably use class for what you are trying to do, I think (ps: what are you trying to do?).

Hope this helps!