Quais são os valores válidos para o atributo id em HTML?


2015

Ao criar os idatributos para elementos HTML, quais regras existem para o valor?


96
Isso difere entre o HTML5 e as versões anteriores da especificação. Eu expliquei aqui: mathiasbynens.be/notes/html5-id-class
Mathias Bynens

5
Observei o SharePoint 2010 atribuindo um valor como este - {8CC7EF38-31D8-4786-8C20-7E6D56E49AE2} - {E60CE5E2-6E64-4350-A884-654B72DA5A53} para uma tabela gerada dinamicamente em uma Web Part e uma página contendo um valor de ID de esse tipo não foi interrompido em nenhum dos navegadores populares. Lidar com esses valores de ID através de JavaScript é que complicado - mvark.blogspot.in/2012/07/...
mvark

3
Os requisitos HTML4 e HTML5 para IDvalores são muito diferentes. Aqui está um resumo rápido e completo do HTML5 IDregras: stackoverflow.com/a/31773673/3597276
Michael Benjamin

5
Observe: Fazer o que algumas das respostas disseram e usar um período ( **.**)com o jQuery, você terá muitos problemas, por exemplo, o uso <input id="me.name" />e, em seguida, $("#me.name").val()fará com que o jQuery procure uma <me>tag com a classe .name, que ninguém deseja Realmente!
Can O 'Spam

3
@SamSwift ope Não, você só precisa escapar de caracteres especiais, como dizem os médicos . Por favor, verifique esta demonstração online .
Álvaro González

Respostas:


1702

Para o HTML 4 , a resposta é tecnicamente:

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 (".").

HTML 5 é ainda mais permissivo, dizendo apenas que um ID deve conter pelo menos um caractere e não pode conter caracteres de espaço.

O atributo id diferencia maiúsculas de minúsculas em XHTML .

Por uma questão puramente prática, convém evitar certos caracteres. Períodos, dois pontos e '#' têm um significado especial nos seletores CSS, portanto, você precisará escapar desses caracteres usando uma barra invertida em CSS ou uma barra invertida dupla em uma sequência de seletor passada para o jQuery . Pense em quantas vezes você terá que escapar de um caractere em suas folhas de estilo ou código antes de enlouquecer com pontos e dois pontos nos IDs.

Por exemplo, a declaração HTML <div id="first.name"></div>é válida. Você pode selecionar esse elemento no CSS como #first\.namee no jQuery da seguinte forma: $('#first\\.name').Mas se você esquecer a barra invertida, $('#first.name')terá um seletor perfeitamente válido procurando um elemento com id firste também tendo classe name. Este é um erro fácil de ignorar. Você pode estar mais feliz a longo prazo escolhendo o ID first-name(um hífen em vez de um ponto).

Você pode simplificar suas tarefas de desenvolvimento aderindo estritamente a uma convenção de nomenclatura. Por exemplo, se você se limita inteiramente a caracteres minúsculos e sempre separa palavras com hífens ou sublinhados (mas não os dois, escolha um e nunca use o outro), terá um padrão fácil de lembrar. Você nunca vai se perguntar "foi firstNameou não FirstName?" porque você sempre saberá que deve digitar first_name. Prefere estojo de camelo? Em seguida, limite-se a isso, sem hífens ou sublinhados e sempre, sempre use maiúsculas ou minúsculas para o primeiro caractere, não os misture.


Um problema agora muito obscuro era que pelo menos um navegador, o Netscape 6, tratava incorretamente os valores dos atributos de id como distinção entre maiúsculas e minúsculas . Isso significava que, se você tivesse digitado id="firstName"seu HTML (letras minúsculas 'f') e #FirstName { color: red }seu CSS (letras maiúsculas 'F'), esse navegador de buggy falharia ao definir a cor do elemento para vermelho. No momento desta edição, em abril de 2015, espero que você não esteja sendo solicitado a apoiar o Netscape 6. Considere isso como uma nota de rodapé histórica.


78
Note-se que classe e id atributos são case-sensitive em XHTML, todos os outros atributos não são. Eric Meyer mencionou isso em um workshop de CSS em que participei.
22610 John Topley

31
Observe também que, se você tentar escrever uma regra CSS para segmentar um elemento por ID, e o ID aparecer com um número, ele não funcionará. Vadio!
Zack The Human

55
Quanto a '.' ou ':' em um ID usando jQuery, consulte as Perguntas frequentes sobre o jQuery . Ele contém uma pequena função que faz o escape necessário.
Wolfram

7
O idatributo é [ w3.org/TR/html4/struct/global.html#adef-idExit ( sensível a maiúsculas em HTML4) e deve começar com uma letra (limitada de A a Z). Observe também que seu exemplo não deve tornar a cor do texto do elemento vermelha, pois seu CSS se refere a um elemento com classe e FirstNamenão ao seu id.
Augustus Kling

5
O erro que Augusto apontou ainda está presente. No seu exemplo, se você possui id="firstName"HTML 4 ou HTML 5 e #FirstName { color: red }em CSS, apenas um navegador com bugs configurará a cor do elemento para vermelho.
Stephen Booher

221

Na especificação do HTML 4 :

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 (".").

Um erro comum é usar um ID que comece com um dígito.


20
Observe que o HTML5 permite muito mais que o HTML4. Veja, por exemplo, 456bereastreet.com/archive/201011/… e w3.org/TR/html5/elements.html#the-id-attribute
Mr Shark

O IE6 não suportava ID começando com sublinhados, mas está morto de qualquer maneira.
DOC_ID

2
@rahmanisback em relação ao IE6, alguém pensaria assim, mas estou finalizando uma proposta agora para um banco e eles insistem em que qualquer aplicativo que um fornecedor desenvolva seja executado no IE6. Isso é para 30.000 usuários. Caramba, se conseguirmos que eles atualizem seus navegadores em todos esses computadores, isso pode ajudar a taxa de desemprego.
Karl

2
@ Karl Lamento ouvir isso. Faça todos os seus esforços para alertar sobre problemas de segurança do IE6. No entanto, o IE7 em breve será o novo IE6, então parece que é o nosso destino neste setor corrigir os erros do passado da MS.
doc_id 14/09/12

@MrShark O segundo link está quebrado; Novo link
SWdV

155

Tecnicamente, você pode usar dois pontos e pontos nos atributos id / name, mas eu sugeriria evitar os dois.

No CSS (e em várias bibliotecas JavaScript como o jQuery), o período e os dois pontos têm um significado especial e você terá problemas se não for cuidadoso. Os períodos são seletores de classe e dois pontos são pseudo-seletores (por exemplo, ": hover" para um elemento quando o mouse está sobre ele).

Se você atribuir a um elemento o ID "my.cool:thing", seu seletor de CSS ficará assim:

#my.cool:thing { ... /* some rules */ ... }

O que realmente está dizendo, "o elemento com um ID 'my', uma classe de pseudo-seletor 'cool' e 'thing'" no CSS-speak.

Atenha-se a AZ de qualquer caso, números, sublinhados e hífens. E, como dito acima, verifique se seus IDs são únicos.

Essa deve ser sua primeira preocupação.


21
Você pode usar dois pontos e pontos - mas precisará escapar deles usando barras invertidas duplas, por exemplo: $ ('# my \\. Cool \\: thing') ou escapando de uma variável: $ ('#' + id.replace (/ \ ./, '\\.'). replace (/ \: /, '\\:')) groups.google.com/group/jquery-en/browse_thread/thread/…
joeformd

2
Por que não numerais; por que apenas AZ? Os números são IDs muito úteis quando se refere a elementos relacionados a dados digitados com um número, desde que você não comece com o número.
cori

4
Apenas para sua informação, traços são tecnicamente hífens. O sinal de menos não está no conjunto de caracteres ASCII. en.wikipedia.org/wiki/Plus_and_minus_signs#Character_codes
Anton Strogonoff

4
Se você possui esses caracteres ( ., :) em ids e não pode removê-los (tosse ... Sharepoint), é possível contornar isso em CSS com seletores de atributos em vez de seletores de id; por exemplo [id='my.cool:thing'], no entanto, esse seletor terá uma especificidade menor do que uma seletor de identificação, o que pode causar outros problemas.
Fausto

2
Velho, eu sei, mas atualizado para incluir números e recuar em hífens
Michael Thompson


66

Estritamente, deve corresponder

[A-Za-z][-A-Za-z0-9_:.]*

Mas o jquery parece ter problemas com dois pontos, por isso é melhor evitá-los.


2
Ou, alternativamente: "para que seja melhor evitar o jquery". ;)
domsson 11/01

59

HTML5:

se livra das restrições adicionais no atributo id, veja aqui . Os únicos requisitos restantes (além de exclusivos no documento) são:

  1. o valor deve conter pelo menos um caractere (não pode estar vazio)
  2. não pode conter caracteres de espaço.

PRE-HTML5:

O ID deve corresponder:

[A-Za-z][-A-Za-z0-9_:.]*
  1. Deve começar com caracteres AZ ou az
  2. Pode conter -(hífen), _(sublinhado), :(dois pontos) e .(ponto)

mas deve-se evitar :e .porque:

Por exemplo, um ID pode ser rotulado "ab: c" e referenciado na folha de estilos como #ab: c, mas, além de ser o ID do elemento, pode significar ID "a", classe "b", pseudo- seletor "c". Melhor evitar a confusão e ficar longe de usar. e: completamente.


57

HTML5: valores permitidos para atributos de ID e classe

No HTML5, as únicas restrições ao valor de um ID são:

  1. deve ser exclusivo no documento
  2. não deve conter caracteres de espaço
  3. deve conter pelo menos um caractere

Regras semelhantes se aplicam às classes (exceto a exclusividade, é claro).

Portanto, o valor pode ter todos os dígitos, apenas um dígito, apenas caracteres de pontuação, incluir caracteres especiais, qualquer que seja. Apenas sem espaço em branco. Isso é muito diferente do HTML4.

No HTML 4, os valores de ID devem começar com uma letra, que pode ser seguida apenas por letras, dígitos, hífens, sublinhados, dois pontos e pontos.

No HTML5, estes são válidos:

<div id="999"> ... </div>
<div id="#%LV-||"> ... </div>
<div id="____V"> ... </div>
<div id="⌘⌥"> ... </div>
<div id="♥"> ... </div>
<div id="{}"> ... </div>
<div id="©"> ... </div>
<div id="♤₩¤☆€~¥"> ... </div>

Lembre-se de que o uso de números, pontuação ou caracteres especiais no valor de um ID pode causar problemas em outros contextos (por exemplo, CSS, JavaScript, regex).

Por exemplo, o seguinte ID é válido em HTML5:

<div id="9lions"> ... </div>

No entanto, é inválido no CSS:

Na especificação CSS2.1:

4.1.3 Caracteres e caso

No CSS, os identificadores (incluindo nomes de elementos, classes e IDs nos seletores) podem conter apenas os caracteres [a-zA-Z0-9] e os caracteres ISO 10646 U + 00A0 e superior, além do hífen (-) e o sublinhado ( _); eles não podem começar com um dígito, dois hífens ou um hífen seguido por um dígito .

Na maioria dos casos, você pode escapar dos caracteres em contextos em que eles têm restrições ou significado especial.


Referências W3C

HTML5

3.2.5.1 O id atributo

O idatributo especifica o identificador exclusivo (ID) do seu elemento.

O valor deve ser exclusivo entre todos os IDs na subárvore inicial do elemento e deve conter pelo menos um caractere. O valor não deve conter caracteres de espaço.

Nota: Não há outras restrições sobre a forma que um ID pode assumir; em particular, os IDs podem consistir apenas em dígitos, começar com um dígito, começar com um sublinhado, consistir apenas em pontuação etc.

3.2.5.7 O class atributo

O atributo, se especificado, deve ter um valor que é um conjunto de tokens separados por espaço, representando as várias classes às quais o elemento pertence.

As classes que um elemento HTML atribuiu a ele consistem em todas as classes retornadas quando o valor do atributo de classe é dividido em espaços. (Duplicatas são ignoradas.)

Não há restrições adicionais nos tokens que os autores podem usar no atributo class, mas os autores são incentivados a usar valores que descrevem a natureza do conteúdo, em vez de valores que descrevem a apresentação desejada do conteúdo.


34

Na prática, muitos sites usam idatributos começando com números, mesmo que isso não seja tecnicamente um HTML válido.

A especificação de rascunho do HTML 5 afrouxa as regras para os atributos ide name: agora são apenas cadeias opacas que não podem conter espaços.


32

Hífens, sublinhados, pontos, dois pontos, números e letras são válidos para uso com CSS e JQuery. O seguinte deve funcionar, mas deve ser exclusivo em toda a página e também deve começar com uma letra [A-Za-z].

Trabalhar com dois pontos e pontos exige um pouco mais de trabalho, mas você pode fazê-lo como mostra o exemplo a seguir.

<html>
<head>
<title>Cake</title>
<style type="text/css">
    #i\.Really\.Like\.Cake {
        color: green;
    }
    #i\:Really\:Like\:Cake {
        color: blue;
    }
</style>
</head>
<body>
    <div id="i.Really.Like.Cake">Cake</div>
    <div id="testResultPeriod"></div>

    <div id="i:Really:Like:Cake">Cake</div>
    <div id="testResultColon"></div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var testPeriod = $("#i\\.Really\\.Like\\.Cake");
            $("#testResultPeriod").html("found " + testPeriod.length + " result.");

            var testColon = $("#i\\:Really\\:Like\\:Cake");
            $("#testResultColon").html("found " + testColon.length + " result.");
        });
    </script>
</body>
</html>

25

HTML5

Tendo em mente que o ID deve ser único, ou seja. não deve haver vários elementos em um documento que tenham o mesmo valor de ID.

As regras sobre o conteúdo do código em HTML5 são (além de exclusivas):

This attribute's value must not contain white spaces. [...] 
Though this restriction has been lifted in HTML 5, 
an ID should start with a letter for compatibility.

Esta é a especificação W3 sobre o ID (do MDN):

Any string, with the following restrictions:
must be at least one character long
must not contain any space characters
Previous versions of HTML placed greater restrictions on the content of ID values 
(for example, they did not permit ID values to begin with a number).

Mais informações:

  • W3 - atributos globais (id)
  • Atributo MDN (id)

18

Para fazer referência a um ID com um período, você precisa usar uma barra invertida. Não tenho certeza se é o mesmo para hífens ou sublinhados. Por exemplo: HTML

<div id="maintenance.instrumentNumber">############0218</div>

CSS

#maintenance\.instrumentNumber{word-wrap:break-word;}

3
Hífens e sublinhados normalmente não precisam ser escapados. No entanto, a exceção é se o hífen aparecer no início do identificador e for seguido por outro hífen (por exemplo \--abc) ou um dígito (por exemplo \-123).
precisa

16

A partir da especificação do HTML 4 ...

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 (".").

EDIT: d'oh! Batido ao botão, novamente!


16

Além disso, nunca esqueça que um ID é único. Uma vez usado, o valor do ID pode não aparecer novamente em qualquer lugar do documento.

Você pode ter muitos IDs, mas todos devem ter um valor único.

Por outro lado, existe o elemento de classe. Assim como o ID, ele pode aparecer várias vezes, mas o valor pode ser usado repetidamente.


12

Um identificador exclusivo para o elemento.

Não deve haver vários elementos em um documento que tenham o mesmo valor de ID.

Qualquer sequência, com as seguintes restrições:

  1. deve ter pelo menos um caractere
  2. não deve conter caracteres de espaço:

    • ESPAÇO U + 0020
    • U + 0009 TABELA DE PERSONAGENS (guia)
    • ALIMENTAÇÃO DE LINHA U + 000A (LF)
    • U + 000C ALIMENTAÇÃO DE FORMULÁRIO (FF)
    • RETORNO DE CARRO U + 000D (CR)

O uso de caracteres exceto ASCII letters and digits, '_', '-' and '.'pode causar problemas de compatibilidade, pois não eram permitidos HTML 4. Embora essa restrição tenha sido levantada HTML 5, um ID deve começar com uma carta de compatibilidade.



10

para HTML5

O valor deve ser exclusivo entre todos os IDs na subárvore inicial do elemento e deve conter pelo menos um caractere. O valor não deve conter caracteres de espaço.

Pelo menos um caractere, sem espaços.

Isso abre a porta para casos de uso válidos, como caracteres acentuados. Também nos oferece muito mais munição para disparar, porque agora você pode usar valores de ID que causarão problemas com CSS e JavaScript, a menos que você seja realmente cuidadoso.


9
  1. Os IDs são mais adequados para nomear partes do seu layout, portanto, não devem dar o mesmo nome para ID e classe
  2. O ID permite caracteres alfanuméricos e especiais
  3. mas evite usar # : . * !símbolos
  4. espaços não permitidos
  5. não começou com números ou um hífen seguido por um dígito
  6. maiúsculas e Minúsculas
  7. o uso de seletores de ID é mais rápido do que o uso de seletores de classe
  8. use hífen "-" (sublinhado "_" também pode usar, mas não é bom para SEO), para nomes longos de classes de CSS ou regras de identificação
  9. Se uma regra tiver um seletor de ID como seu seletor de chave, não adicione o nome da marca à regra. Como os IDs são únicos, a adição de um nome de marca diminuiria o processo de correspondência desnecessariamente.
  10. No HTML5, o atributo id pode ser usado em qualquer elemento HTML e no HTML 4.01, o atributo id não pode ser usado com: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

"sublinhado também pode usar, mas não é bom para SEO": desde quando os mecanismos de pesquisa se interessaram pelos nomes de classes ou IDs de CSS?
Nick Rice

9

Qualquer valor alfanumérico e " - " e " _ " são válidos. Mas você deve iniciar o nome do ID com qualquer caractere entre AZ ou az .


6

Sem espaços, deve começar com pelo menos um caractere de a a z e 0 a 9.


4

Em HTML

O ID deve começar com {AZ} ou {az}. Você pode Adicionar dígitos, ponto, hífen, sublinhado, dois pontos.

Por exemplo:

<span id="testID2"></span>
<span id="test-ID2"></span>
<span id="test_ID2"></span>
<span id="test:ID2"></span>
<span id="test.ID2"></span>

Mas mesmo que você possa criar ID com dois pontos (:) ou ponto (.), É difícil para o CSS usar esses ID como seletor. Principalmente quando você deseja usar pseudo elementos (: before,: after).

Também em JS é difícil selecionar esses IDs. Portanto, você deve usar os quatro primeiros IDs, conforme preferido por muitos desenvolvedores e, se necessário, também pode usar os dois últimos.


4

os valores podem ser: [az], [AZ], [0-9], [* _: -]

é usado para HTML5 ...

podemos adicionar um ID com qualquer tag.


2

Desde o ES2015, também podemos usar quase todos os caracteres unicode para IDs, se o conjunto de caracteres do documento estiver definido como UTF8.

Teste aqui: https://mothereff.in/js-variables

insira a descrição da imagem aqui

Leia sobre: https://mathiasbynens.be/notes/javascript-identifiers-es6

No ES2015, os identificadores devem começar com $, _ ou qualquer símbolo com a propriedade principal derivada Unicode ID_Start.

O restante do identificador pode conter $, _, U + 200C com largura zero não marceneiro, U + 200D com largura zero marceneiro ou qualquer símbolo com a propriedade principal derivada Unicode ID_Continue.

const target = document.querySelector("div").id
console.log(
   target
)
document.getElementById(target).style.backgroundColor = "black"
div {
  border: 1px black solid;
  width: 100%;
  height: 200px
}
<div id="H̹̙̦̮͉̩̗̗ͧ̇̏̊̾Eͨ͆͒̆ͮ̃͏̷̮̣̫̤̣Cͯ̂͐͏̨̛͔̦̟͈̻O̜͎͍͙͚̬̝̣̽ͮ͐͗̀ͤ̍̀͢M̴̡̲̭͍͇̼̟̯̦̉̒͠Ḛ̛̙̞̪̗ͥͤͩ̾͑̔͐ͅṮ̴̷̷̗̼͍̿̿̓̽͐H̙̙̔̄͜">


Você deveria usá-lo? Provavelmente não é uma boa ideia!

Leia sobre: https://stackoverflow.com/a/52799593/2494754


-4

alfabetos-> maiúsculas e
dígitos pequenos- > 0-9 caracteres
especiais-> ':', '-', '_', '.'

o formato deve estar começando em '.' ou um alfabeto, seguido por um dos caracteres especiais de mais alfabetos ou números. o valor do campo id não deve terminar com um '_'.
Além disso, os espaços não são permitidos, se fornecidos, eles são tratados como valores diferentes, o que não é válido no caso dos atributos de ID.

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.