it-swarm-pt.tech

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

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

1854
Mr Shark

Para 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]), hifens ("-"), 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 nenhum caractere de espaço.

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

Como um assunto puramente prático, você pode querer evitar certos personagens. Períodos, dois-pontos e '#' têm um significado especial em seletores CSS, então você terá que escapar desses caracteres usando um barra invertida em CSS ou uma barra invertida dupla em um sequência de seletores passada para jQuery . Pense em quantas vezes você terá que escapar de um personagem em suas folhas de estilo ou código antes de enlouquecer com pontos e vírgulas em ids.

Por exemplo, a declaração HTML <div id="first.name"></div> é válida. Você pode selecionar esse elemento em CSS como #first\.name e em jQuery da seguinte forma: $('#first\\.name'). Mas se você esquecer a barra invertida, $('#first.name'), você terá um seletor perfeitamente válido procurando por um elemento com id first e também tendo a classe name. Este é um bug que é fácil ignorar. Você pode ser 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 seguindo estritamente uma convenção de nomenclatura. Por exemplo, se você se limitar inteiramente a letras minúsculas e sempre separar palavras com hifens ou sublinhados (mas não ambos, escolha um e nunca use o outro), então você terá um padrão fácil de lembrar. Você nunca vai se perguntar "foi firstName ou FirstName?" porque você sempre saberá que deve digitar first_name. Prefere o caso do camelo? Em seguida, limite-se a isso, sem hifens ou sublinhados, e sempre use sempre letras 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 do atributo id como diferencia maiúsculas de minúsculas . Isso significava que se você tivesse digitado id="firstName" em seu HTML (minúscula 'f') e #FirstName { color: red } em seu CSS (maiúsculas 'F'), o navegador defeituoso não teria configurado a cor do elemento para vermelho. No momento desta edição, abril de 2015, espero que você não esteja sendo solicitado a oferecer suporte ao Netscape 6. Considere isso como uma nota de rodapé histórica.

1584
dgvid

A partir da especificação 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]), hifens ("-"), sublinhados ("_") , dois pontos (":") e pontos (".").

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

211
Peter Hilton

Você pode tecnicamente usar dois pontos e pontos nos atributos id/name, mas eu sugiro fortemente evitar ambos.

Em CSS (e várias bibliotecas JavaScript como jQuery), tanto o período quanto o cólon 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, ": pairar" para um elemento quando o mouse está sobre ele).

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

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

O que está realmente dizendo, "o elemento com um id de 'meu', uma classe de 'legal' e o 'pseudo-seletor' de coisa" no CSS-speak.

Stick para A-Z de qualquer caso, números, sublinhados e hífens. E, como dito acima, verifique se seus IDs são exclusivos.

Essa deve ser sua primeira preocupação.

145
Michael Thompson

jQuery faz manipula qualquer nome de ID válido. Você só precisa escapar 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 do jQuery (veja nota inferior)

63
Álvaro González

Estritamente deve corresponder

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

Mas jquery parece ter problemas com dois pontos, então talvez seja melhor evitá-los.

60
Mr Shark

HTML5:

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

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

PRE-HTML5:

ID deve corresponder:

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

mas deve-se evitar : e . beacause:

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

52
Zaheer Ahmed

HTML5: valores permitidos para ID e atributos de classe

A partir do HTML5, as únicas restrições sobre o valor de um ID são:

  1. deve ser único no documento
  2. não deve conter nenhum caractere de espaço
  3. deve conter pelo menos um caractere

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

Assim, o valor pode ser todos os dígitos, apenas um dígito, apenas caracteres de pontuação, incluir caracteres especiais, o que for. 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, hifens, sublinhados, pontos e vírgulas.

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

Apenas tenha em mente que usar 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 código a seguir é válido em HTML5:

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

No entanto, é inválido no CSS:

Da especificação CSS2.1:

4.1.3 Caracteres e caso

Em CSS, identificadores (incluindo nomes de elemento, classes e IDs em seletores) pode conter apenas os caracteres [a-zA-Z0-9] e ISO 10646 caracteres U + 00A0 e superiores, mais o 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ê poderá escapar de caracteres em contextos em que eles tenham restrições ou um significado especial.


Referências W3C

HTML5

3.2.5.1 O atributo id

O atributo id especifica o identificador exclusivo (ID) de seu elemento.

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

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

3.2.5.7 O atributo class

O atributo, se especificado, deve ter um valor que seja 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 sobre os tokens que os autores podem usar no atributo class, mas os autores são encorajados a usar valores que descrevam a natureza do conteúdo, em vez de valores que descrevam a apresentação desejada do conteúdo.

47
Michael_B

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

A especificação de rascunho HTML 5 solta as regras para os atributos id e name: agora são apenas strings opacas que não podem conter espaços.

32
pdc

Hífens, sublinhados, pontos, vírgulas, números e letras são todos 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 precisa de 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>
29
blacksun1

HTML5

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

As regras sobre o conteúdo de ID em HTML5 são (além de serem 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.

Este é o W3 spec 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)
  • MDN atribute (id)
23
Sergio

Para referenciar 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;}
17
Anthony

Além disso, nunca esqueça que um ID é único. Uma vez utilizado, o valor de ID pode não aparecer novamente em qualquer lugar no 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 repetidas vezes.

14
Vordreller

Das especificações 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]), hifens ("-"), sublinhados ("_") , dois pontos (":") e pontos (".").

EDIT: d'oh! Espancado até o botão novamente!

14
Steve Morgan

Um identificador exclusivo para o elemento.

Não deve haver vários elementos em um documento com o mesmo valor de id.

Qualquer string, com as seguintes restrições:

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

    • U + 0020 SPACE
    • U + 0009 TABELA DE CARACTERES (aba)
    • ALIMENTAÇÃO DE LINHA U + 000A (LF)
    • U + 000C FORM FEED (FF)
    • U + 000D RETORNO DE TRANSPORTE (CR)

O uso de caracteres, exceto ASCII letters and digits, '_', '-' and '.', pode causar problemas de compatibilidade, já que eles não eram permitidos em HTML 4. Embora essa restrição tenha sido removida em HTML 5, uma ID deve começar com uma letra para compatibilidade.

11
Bhavin Solanki

Parece que embora os dois-pontos (:) e pontos finais (.) Sejam válidos na especificação HTML, eles são inválidos como seletores de ID em CSS então provavelmente é melhor evitar se você pretende usá-los para esse propósito.

9
lstg

para HTML5

O valor deve ser único entre todos os IDs da subárvore inicial do elemento e deve conter pelo menos um caractere. O valor não deve conter nenhum caractere de espaço.

Pelo menos um personagem, sem espaços.

Isso abre a porta para casos de uso válidos, como o uso de caracteres acentuados. Ele também nos dá muito mais munição para atirar em nós mesmos com o pé, já que agora você pode usar valores de ID que causarão problemas com CSS e JavaScript, a menos que você tenha muito cuidado.

8
Kanishka Panamaldeniya

Qualquer Valor alfanumérico e " - " e " _ " são válidos. Mas, você deve iniciar o nome id com qualquer caractere entre A-Z ou a-z .

7
Tazwar Utshas
  1. As IDs são mais adequadas para nomear partes de seu layout, portanto, não deve fornecer o mesmo nome para ID e classe
  2. 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. usar seletores de ID é mais rápido do que usar seletores de classe
  8. use o hífen "-" (o sublinhado "_" também pode ser usado para o seo, mas não é bom) para nomes longos de classes CSS ou de Ids.
  9. Se uma regra tiver um seletor de ID como seletor de chave, não adicione o nome da tag à regra. Como os IDs são exclusivos, adicionar um nome de tag retardaria o processo de correspondência desnecessariamente.
  10. Em HTML5, o atributo id pode ser usado em qualquer elemento HTML e em HTML 4.01, o atributo id não pode ser usado com: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.
7
Web Designer cum Promoter

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

5
Wembo Mulumba