Can a HTML element have multiple unique ID attributes?

Abhishek Madhani picture Abhishek Madhani · Jun 5, 2013 · Viewed 70.2k times · Source

Needed to know if an HTML element can have multiple attributes of ID's, for instance :

<input type="text" id="identifier1" id="selector1" />

As I needed to clarify this statement mentioned about selectors at W3 website.

If an element has multiple ID attributes, all of them must be treated as IDs for that element for the purposes of the ID selector. Such a situation could be reached using mixtures of xml:id, DOM3 Core, XML DTDs, and namespace-specific knowledge.

The Possible duplicates which people are referring, states question for this syntax

<input type="text" id="identifier1 selector1" />

which is different than syntax that I am asking.

Answer

mattytommo picture mattytommo · Jun 5, 2013

Needed to know if an HTML element can have multiple attributes of ID's

Short answer? No because the browser will only render the first one.

See this Fiddle, I can only target it in CSS using the first id that appears in the DOM. Try changing that CSS selector to use the second id, it won't work.

That's because it seems like the second ID is being disregarded by the browser, as this is the output HTML:

<input type="text" id="identifier1">

If you really need additional identifiers on an element, you should think about using either multiple class names or data attributes to correspond to additional data.