02.04.2025

Regras para Formar o Valor do Atributo id em HTML

Resposta Rápida

O valor para o atributo id em HTML deve começar com uma letra latina (minúscula ou maiúscula) ou um sublinhado (_). Ele pode incluir letras latinas, dígitos, hífens, sublinhados, dois pontos e pontos. O uso de caracteres em branco não é permitido. Aqui está um exemplo de um id válido:

<div id="usuario-123_perfil"></div>

Recomenda-se fortemente evitar o uso de ids que começam com dígitos, pois isso é considerado uso impróprio:

<div id="123usuario"></div>

Exclusividade dos IDs

O atributo id deve ser único em todo o documento. Cada elemento deve ter seu próprio id distinto, assim como um nome único para cada indivíduo.

Uso de Caracteres Especiais

Elementos com caracteres especiais, como pontos e dois pontos nos valores de id, precisam ser especificados com cautela especial, pois podem causar ambiguidade no CSS e no JavaScript. No CSS, devem ser referenciados com uma barra invertida (por exemplo, \\#meu.id para o id meu.id), e no jQuery — com uma dupla barra invertida ($("#meu\\.id")).

Sensibilidade a Maiúsculas e Minúsculas em XHTML

Ao contrário do HTML5, nos XHTML, os valores id são sensíveis a maiúsculas e minúsculas, o que significa que 'João' e 'joão' serão considerados como dois identificadores diferentes. Portanto, esteja atento à sensibilidade a maiúsculas e minúsculas.

Garantindo Compatibilidade: Evitando Dígitos no Início

Se você está seguindo o padrão HTML4, o id não deve começar com um dígito. Isso garante máxima compatibilidade entre diferentes navegadores.

Práticas Corretas de Nomeação para IDs

É importante buscar consistência e clareza ao nomear ids. Isso simplifica a colaboração em projetos maiores e melhora a interação com outros desenvolvedores.

Visualização

Você pode imaginar os valores do atributo id como números de placas de veículos únicos para cada elemento HTML:

Regras da Placa:
- Começar com uma **Letra** (🅰️) ou um **Sublinhado** (_)
- Incluir **Letras** (🔤), **Dígitos** (🔢), **Hífens** (-), **Sublinhados** (_)
- Cada número é único para seu veículo (🚗💨)

Exemplos:
- ✅ ID Válido: `ID_A1-Z`
- ❌ ID Inválido: `123-Início` (🚫 Um dígito não pode estar no início!)

Assim como as placas de veículos devem ser únicas e aderir a padrões específicos, os ids em HTML também devem seguir certas regras.

Melhores Práticas para Integração com JS/CSS

Para uma integração suave com CSS e JavaScript, escolha formatos de id com cuidado, evitando caracteres que tenham significados especiais nessas linguagens, como o hash (#).

Organizando Seu Conjunto de IDs

Um sistema bem pensado de identificadores simplifica o processo de desenvolvimento e subsequente otimização do código. Considere aplicar metodologias como BEM (Bloco Elemento Modificador) para uma gestão mais eficaz dos ids.

Sensibilidade a Maiúsculas e Minúsculas em Diferentes Ambientes

No HTML5, a nomenclatura do valor do id não importa, mas em algumas aplicações do tipo ou XML, os casos podem ser distinguíveis, e como resultado, #meuId, #MEUID e #MeuID seriam tratados como três identificadores diferentes.

Recursos Úteis

1. Padrão HTML — A especificação completa da WHATWG para o atributo id em HTML.
2. id - HTML: Linguagem de Marcação de Hipertexto | MDN — Uma descrição detalhada do atributo id em HTML da Mozilla Developer Network.
3. A Diferença Entre ID e Classe | CSS-Tricks — Um artigo extenso sobre a escolha entre id e classe.
4. HTML: Valores válidos para o atributo id? - Stack Overflow — Discussões e perguntas da comunidade sobre valores válidos de id em HTML.
5. Atributo id do HTML - W3Schools — Um guia prático sobre o uso do atributo id em HTML.
6. Posso usar... Tabelas de suporte para HTML5, CSS3, etc — Informações sobre a compatibilidade do navegador com o atributo id em HTML.

Video

Navigation