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

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

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.

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.

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.

jQuery faz lidar com qualquer nome de identificação válido. Você só precisa escapar dos metacaracteres (ou seja, pontos, ponto e vírgula, colchetes ...). É como dizer que o JavaScript tem um problema com aspas apenas porque você não pode escrever

var name = 'O'Hara';

Seletores na API jQuery (consulte a nota inferior)

Estritamente, deve corresponder

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

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

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.

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.

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.

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>

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)

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

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!

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.

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.

Parece que, embora dois pontos (:) e pontos (.) Sejam válidos na especificação HTML, eles são inválidos como seletores de ID no CSS, portanto é melhor evitar isso se você pretende usá-los para esse fim.

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.

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

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 .

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

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.

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

é usado para HTML5 ...

podemos adicionar um ID com qualquer tag.

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

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

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.