20

Acho que o título diz tudo, por que é considerado errado repetirmos IDs em HTML?

Noto muita gente fazendo coisas como:

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

Para aplicar CSS e entendo os problemas que isto causa na hora de selecionar o elemento, mas gostaria de uma explicação com referencias e sobre a "semântica" disto, para formular melhor fica as duvidas:

  • Isto atrapalha o CSS?
  • Isto atrapalha o JavaScript?
  • Sendo independente de linguagem, isto atrapalha o DOM ou manipulação do DOM quanto ao uso de APIs (ou bibliotecas, independente de ser front-end ou outras linguagens que tem a capacidade de manipular)?
  • Existe algum momento em HTML que ID teria a exceção de poder se repetir?

Por favor cite exemplos dos problemas para que possa ficar mais fácil endenter

4
  • 2
    Bem, olhando pelo ponto de vista do Javascript, onde temos a função chamada document.getElementById() que retorna apenas um elemento ao fazermos essa chamada, dá pra se ter a ideia de que a ideia do id é ser referência a um elemento único. Agora, a pergunta é interessantíssima. Todos aprendemos que só pode usar um id, mas geralmente não sabemos explicar "Por quê" Commented 27/07/2018 às 15:18
  • Relacionado ou alguma linkada pode ser dup: pt.stackoverflow.com/q/170451/101
    – Maniero
    Commented 27/07/2018 às 15:24
  • @Maniero a que vc respondeu, sobre ID e NAME, provavelmente serviria como dup, mas gostaria de manter para ter algo mais objetivo dentro do comportamento do DOM e "fora" dele, tipo sobre o HTML ser permissivo, mas ainda sim as coisas quebrarem, vou esperar as respostas, se não for além do que você já disse lá acho que vou considerar como dup mesmo, eu tenho uma ideia formada na minha cabeça, mas ainda não vai muito longe.
    – Syzoth
    Commented 27/07/2018 às 15:31
  • 2
    Finalmente! Agora vou poder marcar várias perguntas de ID como duplicadas!
    – hugocsl
    Commented 27/07/2018 às 15:31

3 Respostas 3

26

Porque a finalidade do id é a de ser um identificador único para o elemento HTML onde ele é aplicado. Se ele não for único, isso vai contra a ideia para a qual ele foi concebido, e não faz sentido falar-se em exceções que possam permitir isso. Se você quiser usar um identificador que possa se aplicar a vários elementos diferentes simultaneamente, utilize o atributo class.

No entanto, isso não atrapalha no CSS (mas eu não confiaria nisso):

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

Já no JavaScript, atrapalha:

// 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>

O mesmo acontece com o 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>

Se o id se repete, o correto seria usar o atributo class:

// 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>

Logo, conclui-se que ids repetidos atrapalham a manipulação do DOM, mesmo com uma biblioteca como o jQuery. E talvez (só talvez) não atrapalhe a CSS.

Em outras linguagens de programação que são capazes de manipular o DOM, provavelmente vai dar errado também. Prova disso é que no Java, por exemplo, o tipo de retorno do método Document.getElementById(String) é Element ao invés de uma NodeList, ou seja um único elemento. Espere esse comportamento ou similar em todas as demais implementações de DOM em todas as demais linguagens de programação. Nenhuma delas vai saber lidar com ids duplicados.

2
  • Não esqueça que apesar de funcioanr em alguns navegadores em alguns casos, como você bem coloca, continua sendo errado - e portanto nada garante que os casos que funcionem agora no chrome e firefox vão funcionar em todos os navegadores, ou mesmo nesses navegadores no futuro.
    – jsbueno
    Commented 27/07/2018 às 17:23
  • @jsbueno Bem observado. Resposta editada. Commented 27/07/2018 às 17:27
16

É errado porque está na especificação do HTML que o ID deve ser único. (Inclusive, se você olhar no documento linkado, que é a especificação oficial do HTML 5, é usada a palavra em inglês "must" - que é "deve" no sentido de realmente ser obrigatório).

O fato de ID repetido funcionar com algumas coisas em alguns navegadores não torna o seu uso mais correto: os navegadores historicamente desenvolveram tolerância a algumas incorreções no HTML, talvez por que, principalmente durante a década de 90, havia muito HTML de péssima qualidade gerado por aplicativos (com dezenas de tags <font ...> intercaladas, etc...). É provável que essa tolerância a IDs duplicados tenha surgido nessa época.

Então, é uma péssima ideia usar ID igual por que mesmo que funcione em alguns casos, primeiro, as APIs de DOM que usam ID não foram feitas para isso: se houver dois elementos numa mesma página com o mesmo ID, qual dos dois deve ser retornado por document.getElementByID?

Se precisar de identificadores iguais para mais de um elemento, é para isso que existe o atributo name (e, veja só, nesse caso a chamada é getElementsByName - no plural, e retorna um array de elementos).

É importante ter em mente que o name também pode ser usado em seletores de CSS. Os atributos "class" e "id", como sabemos, tem operadores exclusivos no seletor de CSS (. e #, respectivamente), mas qualquer atributo de tag HTML pode ser usado no seletor: a sintaxe é colocar o atributo com o uso de colchetes ('[' e ']') após o nome do elemento html. Então se você quer mudar a cor de fundo de vários "div"s com o atributo name="foo" para amarelo, pode fazer:

div[name="foo"] {background: #ffff00;}
<div name="foo">bar</div>
<div name="snafu">zort</div>
<div name="foo">baz</div>

2
  • 1
    The value must be unique amongst all the IDs in the element's home subtree, esta última parte não define que deve ser único na subtree apenas?
    – Woss
    Commented 27/07/2018 às 17:44
  • 4
    O "home subtree" aí é um link - é só clicar lá pra ver a definição dele: "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." - ou seja: não - home subtree é o documento inteiro - a exceção pode ser apenas trechos de DOM criados dinamicamente em Javascript, mas ainda não associados ao document da janela.
    – jsbueno
    Commented 27/07/2018 às 17:56
15

Ao meu ver atrapalha também no HTML, caso vc use ancoras internas na página normalmente se usa href="#link" e no elemento que sera ancorado o id="link".

Se vc usar o id="link" em vários elementos a sua ancora nunca ficara correta, pois ela não vai saber para qual elemento vc realmente quer fazer a ancoragem.

Repare que tendo duas ancoras lincando pro mesmo id elas sempre vão apontar para o primeiro 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>

O mesmo acontece quando se usa o atributo da label for="meu-btn" e no input o id="meu-btn" Repare que clicando na label ela só marca o primeiro checkbox, pois os dois tendo o mesmo id e as labels aponto para o mesmo lugar.

<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

Outro exemplo com label fazendo for para um lista <select>. Repare que tento o mesmo id independente da label o foco é sempre na mesma lista

  <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>

Quando se fala em semântica e acessibilidade o elemento label é fundamental, então seu funcionamento correto é imprescindível, por isso é importante ser usado da forma correta sempre linkando label e elemento focal (https://www.w3.org/WAI/tutorials/forms/labels/)

Importância dos ID no SVG e a acessibilidade

De acordo com a especificação do W3C, não devemos fazer nada adicional para SVGs além de fornecer o <title> e possivelmente um <desc> porque eles devem estar disponíveis para a API de acessibilidade. Infelizmente, o suporte ao navegador ainda não está completo (há bugs relatados para o Chrome e o Firefox por exemplo).

Então, para garantir que a pessoa possa acessar o <title> e <desc>:

Adicione os IDs apropriados ao <title> e <desc>:

  • <title id = "uniqueTitleID"> O título do SVG </ title>
  • <desc id = "uniqueDescID"> Uma descrição mais longa e completa para gráficos complexos. </ desc>

Para isso precisamos de IDs únicos Conforme o exemplo abaixo:

<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>

Fonte: https://css-tricks.com/accessible-svgs/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .