Multiple identical element IDs in HTML5 - how is this supposed to work with scripts? [closed]

Question

I've answered hundreds of jQuery questions. One of the common newbie mistakes is to use multiple element IDs, like so:

<div id="a">....</div>
<div id="a">....</div>

Then they'll do something like this and ask why it doesn't work as expected:

$('#a').hide();

I usually respond with:

IDs must be unique

...to which someone always responds with:

But not in HTML5!

The question: So if multiple identical IDs are allowed in HTML5, how are scripts supposed to handle them, or should we still be avoiding the use of multiple identical element IDs?

Answer 1

Just quoting from HTML5

The id attribute specifies its element's unique identifier (ID). [DOMCORE]

The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

I guess in the general sense, ID may be a misnomer. However, it should be valid within the subtree context.

A home subtree is:

A node's home subtree is the subtree rooted at that node's root element. When a node is in a Document, its home subtree is that Document's tree

Answer 2

I vote to avoid using multiple identical IDs. Jquery returns an array of elements based on the selector which will hide the misuse of this convention.

When using IDs as the jquery selector only 1 element is returned: Jquery Docs

I will continue to keep my IDs unique. It just makes development easier.