Reputation: 21749

Does the id attribute of an HTML element have to be unique in the whole page?

I am using jQuery and I am just wondering, does ID have to be always unique in the whole page? Class, I know, can be repeated as many times as you like, what about ID?

Upvotes: 91

Answers (15)

orgg

Reputation: 97

This is and old post and I'm not necessarily providing the answer or maybe even an answer at all but wanted to add some context in regards HTML element IDs after an experience I had recently (and not being too technical of a perspective)..

I was always under the impression that ID's had little relevance to anything other than CSS styling until recently in an Angular app I was dealing with a component someone had written using dynamically generated IDs.

Presicely the same IDs implemented into 2 components that were alive in the DOM at the same time (but not all visible). In this scenario, 2 components with duplicate IDs binding to the (change) output binding resulted in behaviour where component A was triggering methods in component B. I probably would never have recognized this if the components were created and destroyed as they were visible in the DOM..

I assume the "change" API uses something like "document.GetElementById(x).setValue()" and picks the first instance of this element ID in the markup while doing so, resulting in the observed behaviour. It's a mistake I certainly won't mistake again anyways

Upvotes: 0

Dietmar

Reputation: 1

ID must be unique - One reason for that is, that in the Browser-JavaScript-Context exists a methode: Document.getElementById()

This method can only return one element.
If a Document has not unique IDs, this function behaves in an undocumented and unforeseeable way.

I think, this is reason enough to only use one ID per Document.

Reference: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

Upvotes: 0

Константин Ван

Reputation: 14789

Does an ID have to be unique in the whole page?

No.

Because the HTML Living Standard ^{of March 15, 2022,} clearly states:

The class, id, and slot attributes may be specified on all HTML elements. ……. When specified on HTML elements, the id attribute value must be unique amongst all the IDs in the element’s tree and must contain at least one character. The value must not contain any ASCII whitespace.

and a page may have several DOM trees. It does, for example, when you’ve attached (Element.attachShadow()) a shadow DOM tree to an element.

A document tree and its underlying shadow trees

TL; DR

Does an ID have to be unique in the whole page?

No.

Does an ID have to be unique in a DOM tree?

Yes.

Upvotes: 40

Dealazer

Reputation: 69

The reference with all browsers these days?

Makes div possible in such terms of being used multiple times.

There is no rule that it must be unique. When all browsers understand:

<script>div#some {font-size: 20px}</script>
<div id="some"><p>understand</p></div>
<div id="some"><h1>me too</h1></div>

When you add new style CSS codes you have the possibility to use the addition of styles. Since that even is not supposed to be unique it describes the opposite use, so make more styles but do not make more objects? And as you can; assign several div objects, so why didn't they tell you that class must be unique? That's because the class does not need unique value. And that makes the ID in legal terms obsolete if not being unique.

<script>.some {font-size: 25px}</script>
<div class="some"><p>enter</p></div>
<div class="some"><h1>enter</p></div>

"When there is no rule when a rule is said. Then the rule is not fulfilled. It's not inherent to exist. By only in the illusion of all rules that it should have existed only to make life much harder."

Just because some people say div must be unique, this might be right, but at least through their professional perspective to say it, they have to say it. Unless they didn't check the modern browsers, which from nearly the beginning were able to understand the code of several different div objects with the same style.

Upvotes: 0

Spinner

Reputation: 1088

I'm adding to this question, because I feel it has not been answered adequately in any of the above,

As a point reference: I've implemented non-unique id's, and all works just fine (across all browsers). Importantly, when coding, I've not run into any css logic errors, which is where the rubber hits the road (IMO) on this question. Have also not run into any conflicts in js (as one can glean out id's in context with classes)

So, why do id's have to be unique? Obvious answer (as stated and re-stated above) is 'cause the 'standards' say so. The missing part for me is why?

i.e. what actually goes awry (or could theoretically go awry) if (heaven forbid) someone inadvertently used the same id twice?

Upvotes: 0

FatalError

Reputation: 54551

Yes, it must be unique.

HTML4:

https://www.w3.org/TR/html4/struct/global.html#h-7.5.2

Section 7.5.2:

id = name [CS] This attribute assigns a name to an element. This name must be unique in a document.

HTML5:

https://www.w3.org/TR/html5/dom.html#element-attrdef-global-id

The id attribute specifies its element's unique identifier (ID). 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.

Upvotes: 74

PandaWood

Reputation: 8343

Technically, by HTML5 standards ID must be unique on the page - https://developer.mozilla.org/en/DOM/element.id

But I've worked on extremely modular websites, where this is completely ignored and it works. And it makes sense - the most surprising part.

We call it "componentization"

For example, you might have a component on your page, which is some kind of widget. It has stuff inside with their own unique IDs eg "ok-button"

Once there are many of these widgets on the page, you technically have invalid HTML. But it makes perfect sense to componentize your widgets so that they each, internally, reference their own ok button eg if using jquery to search from it's own root it might be: $widgetRoot.find("#ok-button")

This works for us, though technically IDs shouldn't be used at all, once they're not unique.

As cited above, even YouTube does it, so it's not so renegade.

Upvotes: 7

vanduc1102

Reputation: 6245

Jan 2018, here is Youtube HTML , you can see id="button" id="info" are duplicated.

Upvotes: 5

serv-inc

Reputation: 38187

There are great answers for the same question at https://softwareengineering.stackexchange.com/questions/127178/two-html-elements-with-same-id-attribute-how-bad-is-it-really.

One tidbit not mentioned above is that if there are several identical ids one the same page (which happens, even though it violates the standard):

If you have to work around this (that's sad), you can use $("*#foo") which will convince jQuery to use getElementsByTagName and return a list of all matched elements.

Upvotes: 1

keune

Reputation: 5795

With Javascript, you can only reference to one element using ID. document.getElementById and jQuery's $ selector will return only the first element matching. So it doesn't make sense using the same ID on multiple elements.

Upvotes: 2