De acordo com W3C, o atributo ID em HTML é um identificador exclusivo para o elemento. Ele fornece uma maneira de identificar uma área de uma página da web para estilos CSS, links de âncora e destinos para scripts.
Para que serve o atributo ID?
O atributo ID executa várias ações para páginas da web:
- Um seletor de folha de estilo: Esta é a função para a qual a maioria das pessoas usa o atributo ID. Por serem únicos, você estilizará apenas um item em sua página da web ao estilizar usando uma propriedade de ID. A desvantagem de usar um ID para fins de estilo é que ele tem um nível muito alto de especificidade, o que pode torná-lo muito desafiador se você precisar substituir um estilo por algum motivo mais tarde em um folha de estilo. Por causa disso, as práticas atuais da web tendem a usar classes e seletores de classe no lugar de IDs e seletores de ID para fins de estilo geral.
- Âncoras nomeadas para vincular a: Navegadores da web segmente localizações precisas em seus documentos da web apontando para o ID no final do URL. Adicione o id ao final do URL da página, precedido por uma marca de hash. Link para essas âncoras com a própria página, adicionando a hashtag e o nome do ID no href atributo para o elemento. Por exemplo, para uma divisão com um ID de contato, crie um link para ele nessa página com #contato.
- Uma referência para scripts: Se você escrever qualquer função Javascript, use o atributo ID para que possa fazer alterações no elemento preciso na página com seus scripts.
- Outro processamento: A id oferece suporte ao processamento em seus documentos da web de qualquer maneira que você precisar. Por exemplo, você pode extrair o HTML em um banco de dados e usar o atributo ID para identificar campos.
Regras para usar o atributo ID
Certifique-se de que seus atributos de ID estejam em conformidade com estes três padrões:
- O ID deve começar com uma letra (a-z ou A-Z).
- Todos os caracteres subsequentes podem ser letras, números (0-9), hífens (-), sublinhados (_), dois pontos (:) e pontos (.).
- Cada ID deve ser exclusivo no documento.
Usando o atributo ID
Depois de identificar um elemento único de seu site, use folhas de estilo para estilizar apenas aquele elemento.
Por exemplo, para identificar um ID intitulado contato, use um destes formulários:
div # contact {background: # 0cf;}
#contact {background: # 0cf;}
A primeira amostra tem como alvo uma divisão com um atributo de ID de contato. O segundo ainda tem como alvo o elemento com um ID de contato, simplesmente não estipularia que é uma divisão. O resultado final do estilo seria exatamente o mesmo.
Você também pode vincular a esse elemento específico sem adicionar tags.
Faça referência a esse parágrafo em seus scripts com o getElementById Método JavaScript:
document.getElementById ("seção de contato")
Os atributos de ID ainda são muito úteis em HTML, embora seletores de classe os substituíram para fins de estilo mais gerais. Usar o atributo ID como um gancho para estilos, ao mesmo tempo que os usa como âncoras para links ou destinos para scripts, significa que eles ainda têm um lugar importante no design da web hoje.