Why Are Duplicate Id Values Not Allowed in Html

Why are duplicate ID values not allowed in HTML?

Specification says UNIQUE

HTML 4.01 specification says ID must be document-wide unique.

HTML 5 specification says the same thing but in other words. It
says that ID must be unique in its home subtree, which is basically
the document if we read the definition of it.

Avoid duplication

But since HTML renderers are very forgiving when it comes to HTML
rendering they permit duplicate IDs. This should be avoided if at all
possible and strictly avoided when programmatically accessing
elements by IDs in JavaScript. I'm not sure what getElementById
function should return when several matching elements are found?
Should it:

• return an error?
• return first matching element?
• return last matching element?
• return a set of matching elements?
• return nothing?

But even if browsers work reliably these days, nobody can guarantee
this behavior in the future since this is against specification.
That's why I recommend you never duplicate IDs within the same
document.

This is an answer by Robert Koritnik at Software Engineering asked by danludwig

Question: Two HTML elements with same id attribute: How bad is it really?

Duplicate ids not allowed in HTML

That code is incorrect. Incorrect doesn't come in shades of grey. This
code violates the standard and is therefore incorrect. It would fail
validation checking, and it should. That said, no browser currently
on the market would complain about it, or have any problem with it at
all. Browsers would be within their rights o complain about it, but
none of the current versions of any of them currently do. Which
doesn't mean future versions might not treat this code badly.

~From Dan Ray

Duplicate ids and JavaScript

So if you use duplicate ids in your HTML many libraries will not work as expected. The most libraries will get the first id they find and return that element. When we look at pure JavaScript: the document.getElementById("idName"); should return in the case of multiple elements with the same id. It says it must return the first element, in tree order.

Html duplicated ID

You absolutely should not have duplicate IDs. It may work*, but it is semantically incorrect and you should not do it

You should restructure your jQuery, however much that may stink. The best option would be to use a class, perhaps using the specific id of the parent to specify which one you want

Another less attractive but viable way would be to add a number or something to the end of the ID to make it unique then use jQuery to detect any elements with a specific part of an ID

* - As Arun describes jQuery will accept the selector, but it is NOT favorable because it is incorrect

Why are duplicate ID's an error in HTML5 checkup?

You've made several mistakes:

• id attribute is of type #ID which by the HTML/SGML standard is defined to be unique, if you want to show duplicates you should use class attribute (this is part of why there's getElementsByClassName returning a list but getElementById returning only a single item in the JavaScript DOM API)
• span is inline element, while p is a block element, HTML does not allow block element inside inline element. You should replace your span with div. You can use display: inline or display: inline-block if you want it to appear like inline level elements. Example of inline elements include: a, span, etc; example of block elements include: div, p, ul, li, etc.

Do duplicate ID values screw up jQuery selectors?

jQuery matches exactly one element when querying for an ID. An array of at most one Element object will be returned by $("#foo").get(). See the jQuery documentation for more information, or try it yourself.

$(function() {
    alert($("#foo").length);
});

W3C errors for duplicate id's

For something that appears several times, you want something that classifies them, not identifies them. An id should be unique in the page.

Even though some things work with duplicate identifiers, it's not certain that it works the same in all browsers, and some things certainly won't work. If for example you want to use the identifier to find the elements using JavaScript, you will run into problems.

Use the class attribute instead. CSS:

.cloudbullet {
  background-color: #85c0bf;
  height: 22px;
  left: 13px;
  margin-top: 7px;
  position: relative;
  top: 63px;
  width: 20px;
}

HTML:

<div id="container1-title">
  <h2>Cloud/Hosting</h2>
</div>

<div class="cloudbullet">
</div>
<div class="cloudbullet">
</div>
<div class="cloudbullet">
</div>
<div class="cloudbullet">
</div>
<div class="cloudbullet">
</div>
<div class="cloudbullet">
</div>

W3C Validater error Duplicate attribute id.

"Duplicate attribute id.” means that you have defined the id twice.

For example

<div id="1232" attr1=""  id="...">

remove on of the id attributes and the error should gone.

"Duplicate id" means you have two tags with the same id.

For example

 <div id="1"></div>
 <div id="1"></div>

rename the id of one element.

Opinion: in HTML, Possible Duplicate IDs or Non-Standard Attributes?

Note that an ID cannot start with a digit, so:

<div class="thing" id="5">

is invalid HTML. See What are valid values for the id attribute in HTML?

In your case, I would use ID's like thing5 or thing.5.

---

Related Topics