Why is it wrong / bad to repeat an HTML ID?

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

However, this does not bother in CSS (but I would not trust it):

#teste {
    color: red;
}

<div id="teste">Teste 1</div>
<div id="teste">Teste 2</div>
<div id="outro">Teste 3</div>

Already in JavaScript, it hinders:

// 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 goes for 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><divid="teste">Teste 1</div>
<div id="teste">Teste 2</div>
<div id="outro">Teste 3</div>

If id is repeated, the correct one would be 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><divclass="teste">Teste 1</div>
<div class="teste">Teste 2</div>
<div class="outro">Teste 3</div>
<div class="outro">Teste 4</div>

Thus, it is concluded that repeated ids disrupt DOM manipulation, even with a library like jQuery. And maybe (just maybe) do not mess with CSS.

In other programming languages that are able to manipulate the DOM, it will probably go awry as well. Proof of this is that in Java, for example, the return type of method Document.getElementById(String) is Element instead of a NodeList , ie 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 deal with id s duplicates.

In my view, it also hinders HTML, if you use internal anchors on the page, you usually use href="#link" and the element that will be anchored to id="link" .

If you use id="link" on several elements your anchor will never be correct, because it will not know which element you really want to do the anchoring.

Note that having two anchors linking to the same id they will always point to the first id

<a href="#link">menu 1</a>
<a href="#link">menu 2</a>

<div id="link" style="margin-top: 100vh">div menu 1</div>
<div id="link" style="margin-top: 200vh">div menu 2</div>

The same happens when you use the label for="meu-btn" attribute and the input the id="meu-btn" Note that by clicking label it only marks the first checkbox , since the two having the same id and labels to the same place.

<label for="meu-btn">label1 btn1</label><br><br>
<label for="meu-btn">label2 btn2</label><br><br>
<input id="meu-btn" type="checkbox">btn1<br>
<input id="meu-btn" type="checkbox">btn2

Another example with label doing is for a <select> list. Notice that I try the same id independent of label foco is always on the same list

  <label for="lista">Lista 1</label>
  <select id="lista">
    <option>Maria</option>
    <option>José</option>
    <option>João</option>
  </select>
  
  <label for="lista">Lista 2</label>
  <select id="lista">
    <option>123</option>
    <option>345</option>
    <option>789</option>
  </select>

When talking about semantics and accessibility the element label is fundamental, so its correct operation is imperative, so it is important to be used correctly always linking label and focal element ( link )

Importance of IDs in SVG and accessibility

According to the W3C specification, we should not do anything additional for SVGs other than supplying <title> and possibly <desc> because they must be available for the accessibility API. Unfortunately, browser support is not yet complete (there are bugs reported for Chrome and Firefox for example).

So, to ensure that the person can access <title> and <desc> :

Add the appropriate IDs to <title> and <desc> :

• <title id = "uniqueTitleID"> The SVG title </ title>
• <desc id = "uniqueDescID"> A longer and more complete description for complex graphs. </ desc>

For this we need unique IDs As the example below:

<svg id="cat"aria-labelledby="catTitle catDesc" role="img">
  <title id="catTitle">Título da figura</title>
  <desc id="catDesc">Descrição completa do elemento etc.</desc>
  <path d="M545.9,695.9c8.........."/>
</svg>

Source: link

It's wrong because it's in the HTML specification than the ID should be unique . (Including, if you look in the linked document, which is the official specification of HTML 5, the English word "must" is used - which is "must" in the sense of actually being mandatory.)

So, it's a bad idea to use the same ID because even if it works in some cases, first, the DOM APIs that use IDs were not made for this: if there are two elements on the same page with the same ID, which two must be returned by document.getElementByID ?

If you need equal identifiers for more than one element, that's what the name attribute is for (and, in that case, the call is getElementsByName - in the plural, and returns an array of elements).

It is important to keep in mind that name can also be used in CSS selectors. The "class" and "id" attributes, as we know, have unique operators in the CSS selector ( . and # , respectively), but any HTML tag attribute can be used in the selector : the syntax is to put the attribute with the use of brackets ('[' and ']') after the name of the html element. So if you want to change the background color of several "div" s with the name="foo" attribute to yellow, you can do:

div[name="foo"] {background: #ffff00;}

<div name="foo">bar</div>
<div name="snafu">zort</div>
<div name="foo">baz</div>