What error will i get if i use the same ID for multiple HTML elements?

Issue

I understand that unlike class, an ID should be unique in a HTML document. What will happen if I use the same id multiple times for multiple HTML elements? Will it throw any error? or will it just not work?

I tried to try this scenario but wanted to know more context around it.

Solution

It would be invalid HTML.

In some environments, it may produce a console warning that multiple IDs in a single document is invalid. Harmless, but annoying.

It will prevent document.getElementById from working properly for those elements, because getElementById selects by ID, but there should only be one element with a given ID in the document. Similarly, it may prevent querySelector and querySelectorAll with ID selectors from working properly.

Using the same ID multiple times may well not break your application in most cases, but just because it might be doable in some circumstances doesn't mean it's a good idea. There's no reason to do it, so don't.

Answered By - CertainPerformance