javascript – Why is it considered wrong/bad to repeat an ID in HTML?

Question:

I think the title says it all, why is it considered wrong to repeat IDs in HTML?

I notice a lot of people doing things like:

<div id="foo">bar</div>
<div id="foo">baz</div>

To apply CSS and I understand the problems this causes when selecting the element, but I would like an explanation with references and about the "semantics" of this, to formulate better, the questions remain:

  • Does this get in the way of CSS?
  • Does this get in the way of JavaScript?
  • Being language independent, does this hinder the DOM or DOM manipulation regarding the use of APIs (or libraries, regardless of whether it is front-end or other languages ​​that it has the ability to manipulate)?
  • Is there any time in HTML that ID would have the exception to repeat itself?

Please cite examples of the problems so that it is easier to understand

Answer:

Because the id purpose is to be a unique identifier for the HTML element it is applied to. If it is not unique, it goes against the idea for which it was designed, and it makes no sense to speak of exceptions that might allow this. If you want to use an identifier that can apply to many different elements simultaneously, use the class attribute.

However, it doesn't hurt in CSS (but I wouldn't trust it):

 #teste { color: red; }
 <div id="teste">Teste 1</div> <div id="teste">Teste 2</div> <div id="outro">Teste 3</div>

In JavaScript, it gets in the way:

// Ok
document.getElementById("outro").style="color:blue";

// Só pega o primeiro elemento "teste".
document.getElementById("teste").style="color:red";
<div id="teste">Teste 1</div>
<div id="teste">Teste 2</div>
<div id="outro">Teste 3</div>

The same happens with jQuery:

// Ok
$("#outro").css("color", "blue");

// Só pega o primeiro elemento "teste".
$("#teste").css("color", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="teste">Teste 1</div>
<div id="teste">Teste 2</div>
<div id="outro">Teste 3</div>

If the id repeats, it would be correct to use the class attribute:

// Com jQuery.
$(".outro").css("color", "blue");

// Sem jQuery.
var em = document.getElementsByClassName("teste");
em[0].style="color:red";
em[1].style="color:red";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="teste">Teste 1</div>
<div class="teste">Teste 2</div>
<div class="outro">Teste 3</div>
<div class="outro">Teste 4</div>

Therefore, it is concluded that repeated ids hinder the manipulation of the DOM, even with a library like jQuery. And maybe (just maybe) it won't mess with CSS.

In other programming languages ​​that are capable of manipulating the DOM, it will probably go wrong too. Proof of this is that in Java, for example, the return type of the Document.getElementById(String) method is Element instead of a NodeList , that is, a single element. Expect this or similar behavior in all other DOM implementations in all other programming languages. None of them will know how to handle duplicate id s.

Scroll to Top