what happens if one set id attribute values of several html tags, the same string?

Question

I recently saw a html page, that i thought the id of several html tags was the same, then I realized the ids are unique but it raises the question that what could have happened

Answer 1

Duplicate ids can have various different effects. Which you experience will depend on the method you use to try to access them (and possibly also from browser to browser).

• You'll affect all of them
• You'll affect the first one
• You'll affect the last one
• You'll get a collection instead of an element, try to treat it like an element and get an error

Duplicate ids are not allowed in HTML. Don't make trouble for yourself. Use classes for groups and ids for unique identifiers.

Answer 2

As you said, HTML id, per specs, must be unique. If one where to put duplicated id, the js behavior relative to those ids will be unpredicatable, and could even change between 2 calls.

Any js call on one id (jquery or not) will point to one of the id but without guarentee that :

1. It will be the same every call
2. It will have the same order between 2 page refresh
3. It will have the same behavior beween 2 different browser
4. It will have the same behavior betwween 2 time the same browser

The problems that could emerge depend on how toghtly the js code is coupled to the underlying element DOM structure anw could mostly point to a undefined exception and stop the js execution.

Answer 3

Change them as soon as possible, to save a lot of headache in the future. For elements with same property use classes

About your queries,

Now i wonder what happens if it is not the case??
Well, the HTML is not a valid one anymore. Now a days it doesn't hurt much but still not preferred.

What possible errors can it cause?
Errors are little bit hard to predict. But with jQuery you are going to get many.

Does different browsers show different reactions for this issue?
Not sure.

Does javascript and jquery codes that use duplicated ids run on both tags or what?
jQuery will give you trouble. Consider a case where you have two input fields with same ID. and you try to select second one with out noticing. jQuery('yourID').val() and you'll be selecting the firs value instead. Like this there are a lot of possibilities.