Um elemento html pode ter vários IDs?


310

Entendo que um ID deve ser exclusivo em uma página HTML / XHTML.

Minha pergunta é, para um determinado elemento, posso atribuir vários IDs a ele?

<div id="nested_element_123 task_123"></div>

Percebo que tenho uma solução fácil usando simplesmente uma classe. Só estou curioso sobre o uso de IDs dessa maneira.


Estou programando quase por um tempo em html css e js. Freqüentemente tenho a necessidade de usar várias classes, mas na verdade nunca uso e não preciso usar vários IDs. No entanto, estou um pouco curioso: posso perguntar qual é a situação que você enfrentou nessa ocasião para precisar de vários IDs?
Willy wonka

No raro cenário em que não se tem acesso ao HTML de origem (por exemplo, ao criar proxies), se você precisar direcionar um elemento que possua vários IDs, o seletor css [id = "one two three" '] deve direcionar o elemento.
precisa saber é o seguinte

Isso realmente depende da especificação citada (e provavelmente implementada) e do contexto nela. ou seja, w3.org/TR/html5/dom.html#the-id-attribute e o mais antigo que indica "sim"? w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute
Mark Schultheiss

1
@willywonka Eu sei que isso acontece mais de dois anos mais tarde, mas eu encontrei este artigo agora apenas procurando uma resposta para isso, e senti como compartilhar o cenário com você, me deparei, já que você nunca obteve uma resposta. Estou fazendo um projeto para o freecodecamp para criar uma calculadora JS. Eles querem que o ID da saída seja "display" para que possam executar seus testes, mas estou criando uma calculadora científica com 2 displays: #input e #output, para que o display de #input TAMBÉM precise do id "display" além do valor de "input", quero dar consistência.
Tara Stahler

1
Olá @TaraStahler, de nada. Até onde eu sei, o navegador só renderiza o primeiro se você usar a notação <... id = "input" id = "display" ...> e também um ID não deve conter espaços em branco (nem tabulações), portanto a notação <... id = "input display" ...> não é válida. Acabei de experimentar o javascript no console do Chrome e ele retorna "Uncaught ReferenceError: display is not defined" nos dois casos. Somente o primeiro caso retorna o objeto se eu obtê-lo com o primeiro ID, o segundo não é possível. No segundo caso, nenhum dos IDs é possível. Talvez você precise refatorar seu código?
Willy wonka

Respostas:


205

Não. Na especificação XHTML 1.0

No XML, os identificadores de fragmento são do tipo ID e só pode haver um único atributo do tipo ID por elemento. Portanto, no XHTML 1.0, o atributo id é definido como do tipo ID. Para garantir que os documentos XHTML 1.0 sejam documentos XML bem estruturados, os documentos XHTML 1.0 DEVEM usar o atributo id ao definir identificadores de fragmentos nos elementos listados acima. Consulte as Diretrizes de compatibilidade de HTML para obter informações sobre como garantir que essas âncoras sejam compatíveis com versões anteriores ao exibir documentos XHTML como tipo de mídia text / html.


7
"identificadores de fragmentos são do tipo ID, e só pode haver um único atributo do tipo ID por elemento." Diz aqui, atributo único e atributo é diferente dos valores do atributo. Ele não diz que o valor que esses atributos não devem, em nenhum contexto, assume de múltiplos valores, seja por espaço separado ou por qualquer separação de caracteres. Embora na especificação diz que para compatibilidade não deve conter caracteres espaço em valores de atributos Fragmento Identificadores (w3.org/TR/xhtml1/#guidelines) Então, se você quer expressar IDs vários valores que você tem para expressá-la de forma diferente
Richeve Bebedor

2
Depende das especificações citadas, suponho. "Esta especificação não impede um elemento tendo múltiplas IDs ..." w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute
Mark Schultheiss

Veja aqui onde essa frase é removido w3.org/TR/html5/dom.html#the-id-attribute
Mark Schultheiss

Ok, eu fiz esta resposta atingir a marca de 200 votos positivos. Está tudo bem. Eu vou me ver fora.
KhoPhi

196

Ao contrário do que todo mundo disse, a resposta correta é SIM

A especificação Selectors é muito clara sobre isso:

Se um elemento tiver vários atributos de ID, todos eles deverão ser tratados como IDs para esse elemento para os propósitos do seletor de IDs. Essa situação pode ser alcançada usando misturas de xml: id, DOM3 Core, XML DTDs e namespace específico conhecimento.


Editar

Apenas para esclarecer: Sim, um elemento XHTML pode ter vários IDs, por exemplo

<p id="foo" xml:id="bar">

mas idnão é possível atribuir vários IDs ao mesmo atributo usando uma lista separada por espaço.


7
Ótima resposta - agora isso colocou o gato entre os pombos.
TrojanName 18/05

3
Infelizmente, não é a especificação CSS que está em operação aqui. Para HTML / XHTML, é necessário examinar essa especificação e a especificação definitivamente diz que cada elemento pode ter no máximo um ID e esse ID deve ser exclusivo na página: w3.org/TR/html401/struct/global. html # h-7.5.2 (para HTML 4)
tvanfosson

9
@tvanfosson: Surpreendentemente, a especificação HTML4 NÃO diz que cada elemento pode ter no máximo um ID. Se você olhar para as especificações do HTML5 , encontrará até isso This specification doesn't preclude an element having multiple IDs, if other mechanisms (e.g. DOM Core methods) can set an element's ID in a way that doesn't conflict with the id attribute.(que corresponde às especificações do CSS)
user123444555621

1
você pode ter apenas um atributo de ID e o formato do conteúdo do atributo de ID impede que haja espaços. No contexto da pergunta - fornecer um elemento 2 "HTML" - não é possível fazer isso no HTML 4 ou HTML 5. Você está assumindo que fornecer um ID que funcione com CSS é suficiente para o que ele está tentando fazer, e pode ser que ter um xmlid funcione, mas não vejo como você tira isso da pergunta como está escrito. O exemplo que ele mostra não funciona no HTML 4 ou no HTML 5 e não há como fazê-lo funcionar para realizar o que é mostrado.
Tvanfosson 18/05

6
Votei positivamente nesta resposta, pois responde à pergunta: " você pode atribuir vários IDs a um elemento?" No entanto, devo acrescentar que isso vai além de meras especificações; conforme mostrado na resposta aceita, quando se trata de HTML / XHTML, a especificação diz que você pode atribuir um ID usando o idatributo Para esclarecer, o xml:idatributo (e, de fato, qualquer atributo fora do espaço de nome padrão) não é válido no XHTML. No entanto, como você cita as especificações do HTML5, isso não causa nenhuma xml:id="bar"falha silenciosa; ele ainda adicionará o barID a esse elemento, permitindo que ele corresponda #bar.
BoltClock

28

Meu entendimento sempre foi:

  • Os IDs são de uso único e são aplicados apenas a um elemento ...

    • Cada um é atribuído como um identificador exclusivo a (apenas) um único elemento .
  • As aulas podem ser usadas mais de uma vez ...

    • Portanto, eles podem ser aplicados a mais de um elemento e, de maneira semelhante, porém diferente, pode haver mais de uma classe (ou seja, várias classes) por elemento .

18
Eu não acho que isso se qualifique para ser uma resposta para a pergunta. A pergunta é: "Vários IDs podem ser usados ​​para um único elemento?"
Kevin

4
@kevin Esta resposta assume que o OP está enfrentando um problema XY e pode definitivamente ajudar alguém que está tentando obter o comportamento da classe por meio de IDs - por qualquer motivo.
Mahdi

Você se refere ao "uso único", mas isso pode causar confusão. Você pode e é uma coisa frequente e correta usar várias vezes um elemento pelo seu ID. O que eu acho que você está abordando é outra interpretação: você deve usar um (e apenas um) ID para um elemento e APENAS para esse elemento.
Mbotet

27

Não. Embora a definição do w3c para HTML 4 pareça não cobrir explicitamente sua pergunta, a definição do atributo name e id indica que não há espaços no identificador:

Os tokens de ID e NAME devem começar com uma letra ([A-Za-z]) e podem ser seguidos por qualquer número de letras, dígitos ([0-9]), hífens ("-"), sublinhados ("_") , dois pontos (":") e pontos (".").


20

Não. Todo elemento DOM, se tiver um ID, possui um ID único e único. Você pode aproximar usando algo como:

<div id='enclosing_id_123'><span id='enclosed_id_123'></span></div>

e use a navegação para obter o que você realmente deseja.

Se você deseja aplicar estilos, os nomes das classes são melhores.


Isso quebraria a validação.
Aupajo 10/10/08

3
O que é ilegal nessa resposta? Alguém pode explicar o voto negativo?
tpower 12/10/08

19
Eu não. :-) E não tenho certeza do que você quer dizer sobre quebrar a validação? Os IDs da div e da extensão são diferentes (anexos x anexos), portanto não há problema com os IDs duplicados. Talvez algumas pessoas não estejam lendo muito de perto.
tvanfosson 12/10/08

4
Roubar um banco é ilegal, um problema de software nunca é ilegal. É aquela velha realidade virtual versus realidade atual novamente :-P
TrojanName

@BrianFenton a depuração de outro código me fez perceber que deveria ser ilegal. Eu digo 5 anos de prisão por não seguir as especificações sem uma boa razão para não fazê-lo.
ProblemsOfSumit

18

Você pode ter apenas um ID por elemento, mas de fato pode ter mais de uma classe. Mas não tenha vários atributos de classe, coloque vários valores de classe em um atributo.

<div id="foo" class="bar baz bax">

é perfeitamente legal.


4

Não, você não pode ter vários IDs para uma única tag, mas eu vi uma tag com um nameatributo e um idatributo que são tratados da mesma maneira por alguns aplicativos.


1
no IE, antes do IE8, sim. mas eles corrigiram esse bug no modo de padrões agora. getElementById () usado para retornar incorretamente elementos correspondentes a maiúsculas e minúsculas no nome e no ID.
Scunliffe 10/10/08

4

Não, você deve usar DIVs aninhados se desejar seguir esse caminho. Além disso, mesmo que você pudesse, imagine a confusão que isso causaria ao executar document.getElementByID (). Que ID vai pegar se houver vários?

Em um tópico um pouco relacionado, você pode adicionar várias classes a um DIV. Veja a discussão de Eric Myers em,

http://meyerweb.com/eric/articles/webrev/199802a.html


1
Não obteria o ID especificado entre parênteses? getElementById();não faz nada sem uma string especificando o que obter ?! getElementById('foo');obterá o elemento foo como o ID! Vários IDs não importariam aqui. Ainda procuraria "foo".
Rin e Len

3
Any ID assigned to a div element is unique.
However, you can assign multiple IDs "under", and not "to" a div element.
In that case, you have to represent those IDs as <span></span> IDs.

Say, you want two links in the same HTML page to point to the same div element in  the page.

The two different links
<p><a href="#exponentialEquationsCalculator">Exponential Equations</a></p>         

<p><a href="#logarithmicExpressionsCalculator"><Logarithmic Expressions</a></p>

Point to the same section of the page. 
<!-- Exponential / Logarithmic Equations Calculator -->
<div class="w3-container w3-card white w3-margin-bottom">      
   <span id="exponentialEquationsCalculator"></span>
   <span id="logarithmicEquationsCalculator"></span>
</div>

2

http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.2

O atributo id atribui um identificador exclusivo a um elemento (que pode ser verificado por um analisador SGML).

e

Os tokens de ID e NAME devem começar com uma letra ([A-Za-z]) e podem ser seguidos por qualquer número de letras, dígitos ([0-9]), hífens ("-"), sublinhados ("_") , dois pontos (":") e pontos (".").

Portanto, "id" deve ser único e não pode conter um espaço.


1

Eu gostaria de dizer tecnicamente que sim, já que realmente o que é renderizado é tecnicamente sempre dependente do navegador. A maioria dos navegadores tenta manter as especificações da melhor maneira possível e, até onde eu sei, não há nada nas especificações css. Apenas atestarei o código html, css e javascript real enviado ao navegador antes de qualquer outro interpretador entrar.

No entanto, também digo não, já que todos os navegadores em que testo normalmente não permitem. Se você precisar ver por si mesmo, salve o seguinte como um arquivo .html e abra-o nos principais navegadores. Em todos os navegadores que testei na função javascript não corresponderá a um elemento. No entanto, remova "hunkojunk" da tag id e tudo funciona bem. Código de amostra

<html>
<head>
</head>
<body>
    <p id="hunkojunk1 hunkojunk2"></p>

<script type="text/javascript">
    document.getElementById('hunkojunk2').innerHTML = "JUNK JUNK JUNK JUNK JUNK JUNK";
</script>
</body>
</html>

1

Não.

Dito isto, não há nada para impedi-lo de fazê-lo. Mas você terá um comportamento inconsistente com os vários navegadores. Não faça isso. 1 ID por elemento.

Se você deseja várias designações para um elemento, use classes (separadas por um espaço).


0

Isso é interessante, mas até onde eu sei a resposta é um firme não. Não vejo por que você precisa de um ID aninhado, pois geralmente o cruza com outro elemento que tem o mesmo ID aninhado. Se não o fizer, não há sentido, se o fizer, ainda há muito pouco sentido.


1
Eu teria gostado de usar 2 id's também para compatibilidade com versões anteriores. por exemplo, algo costumava ser o artigo-8 em uma versão anterior, mas agora é chamado de nó-8, com 2 IDs de um elemento, impedindo a codificação de uma solução alternativa para torná-lo compatível com versões anteriores. Embora os dois IDs permaneçam um identificador exclusivo.
FLY

0

Eu sei que isso tem um ano, mas eu estava curioso sobre isso e tenho certeza que outros encontrarão o caminho até aqui. A resposta simples é não, como outros já disseram antes de mim. Um elemento não pode ter mais de um ID e um ID não pode ser usado mais de uma vez em uma página. Experimente e você verá como não funciona.

Em resposta à resposta da tvanfosson sobre o uso do mesmo ID em dois elementos diferentes. Tanto quanto sei, um ID só pode ser usado uma vez em uma página, independentemente de estar anexado a uma tag diferente.

Por definição, um elemento que precisa de um ID deve ser único, mas se você precisar de dois IDs, ele não é realmente único e precisa de uma classe.


1
Mas, se você ler a resposta de tvanfosson, os dois IDs diferem claramente de "enclosing_id_123"! = "Enclosed_id_123"
Ben

0

aulas são feitas especialmente para isso, aqui está o código a partir do qual você pode entender

<html>
<head>
    <style type="text/css">
     .personal{
            height:100px;
            width: 100px;   

        }
    .fam{
            border: 2px solid #ccc;
        }   
    .x{
            background-color:#ccc;
        }   

    </style>
</head>
<body>

    <div class="personal fam x"></div>

</body> 
</html>



-4

Eu não acho que você possa ter dois IDs, mas deve ser possível. Usar o mesmo ID duas vezes é um caso diferente ... como duas pessoas usando o mesmo passaporte. No entanto, uma pessoa pode ter vários passaportes ... Vim procurar por isso, pois tenho uma situação em que um único funcionário pode ter várias funções. Digamos que "sysadm" e "coordenador da equipe" com o id = "sysadm teamcoordinator" me permitam referenciá-los de outras páginas, para que employee.html # sysadm and employee.html # teamcoordinator levem ao mesmo lugar ... Um dia alguém outra pessoa pode assumir a função de coordenador de equipe enquanto o sysadm permanece o sysadm ... então só tenho que alterar os IDs na página employee.html ... mas como eu disse - não funciona :(

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.