Atributo id do HTML
O atributo id define um identificador único para um elemento HTML, usado para aplicar estilos, criar links de âncora e manipular com scripts.
O atributo id do HTML atribui um identificador único a um elemento. Esse nome exclusivo na página permite segmentar o elemento a partir do CSS, criar um link direto para ele a partir de uma URL, acessá-lo via JavaScript e configurá-lo para acessibilidade. Como o id é um atributo global, você pode adicioná-lo a qualquer elemento HTML.
Esta página aborda a única regra que nunca pode ser quebrada (unicidade), a sintaxe válida do id e as quatro funções que um id desempenha em páginas reais: links de fragmento, estilização com CSS, seleção via JavaScript e associações de formulário/acessibilidade. O id faz parte dos atributos globais que todo elemento aceita.
A regra fundamental: um id deve ser único
Um valor de id deve ser único em todo o documento — dois elementos não podem compartilhar o mesmo id. Essa é a principal diferença em relação ao atributo class, onde um nome de classe pode ser reutilizado em vários elementos:
id— um valor, um elemento. Use-o para a única coisa na página (uma seção específica, um campo de formulário particular, o cabeçalho principal).class— reutilizável, para vários elementos. Use-o para um grupo que deve ter a mesma aparência ou comportamento.
Se você duplicar um id, a página ainda será renderizada, mas as ferramentas quebram de formas sutis: getElementById retorna apenas a primeira correspondência, um link #fragment salta para a primeira correspondência e as regras CSS de #id se aplicam de forma imprevisível. Os validadores sinalizam ids duplicados como erros.
Sintaxe válida do id
Algumas regras garantem que um id funcione em todos os lugares:
- Deve ter pelo menos um caractere.
- Não deve conter espaços em branco (espaços, tabulações, quebras de linha).
- É sensível a maiúsculas e minúsculas —
maineMainsão dois ids diferentes. - Para maior compatibilidade, comece o valor com uma letra (
a–z,A–Z) e use apenas letras, dígitos, hífens (-) e underscores (_). Ids que começam com um dígito funcionam em HTML5, mas precisam de escape no CSS, então um nome que começa com letra é a escolha segura.
<!-- Good -->
<div id="main-content"></div>
<section id="pricing"></section>
<!-- Avoid -->
<div id="main content"></div> <!-- space is invalid -->
<div id="2col"></div> <!-- digit-first: awkward in CSS -->Sintaxe
<tag id="id">...</tag>Exemplo do atributo id do HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#grey {
color: grey;
}
#purple {
color: purple;
}
</style>
</head>
<body>
<h1>Example of the HTML id attribute</h1>
<p id="grey">
It is a grey paragraph.
</p>
<p>This is some text.</p>
<p id="purple">
It is a purple paragraph.
</p>
</body>
</html>No exemplo acima, o CSS segmenta cada parágrafo com o seletor #id — um sustenido (#) seguido do valor do id. Como cada id pertence a exatamente um elemento, apenas esse parágrafo é estilizado.
id e class juntos
id e class frequentemente aparecem no mesmo elemento. Um padrão comum é usar uma class para estilização compartilhada e um id para o único elemento que você também precisa vincular ou manipular por script. No próximo exemplo, o cabeçalho carrega um id único enquanto vários parágrafos compartilham uma classe reutilizável:
Exemplo dos atributos id e class do HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#green-bg {
background-color: green;
color: white;
padding: 20px;
text-align: center;
}
.text-grey {
color: grey;
padding: 5px 15px;
}
</style>
</head>
<body>
<h1>Example of the HTML "id" and "class" attributes:</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<h2 id="green-bg">HTML ID attribute</h2>
<p class="text-grey">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.
</p>
<p class="text-grey">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book
</p>
<p class="text-grey">
The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Vinculando a um id (links de fragmento e favoritos)
Um link cujo href começa com # é um link de fragmento (também chamado de âncora ou favorito). Ele aponta para o elemento na mesma página cujo id corresponde ao texto após o #. Clicar nele rola a página até esse elemento — útil para páginas longas, tabelas de conteúdo e links "voltar ao topo".
<a href="#pricing">Jump to pricing</a>
...
<section id="pricing">...</section>Você também pode vincular a um fragmento em outra página combinando uma URL com o hash: <a href="/learn-html/global-attributes#id">…</a>. Abrir uma página com um fragmento na barra de endereço rola diretamente para esse elemento.
Exemplo de adição de um favorito
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
line-height: 1.5;
color: #777777;
}
a {
color: #20c7c1;
display: inline-block;
padding: 5px 15px;
}
strong {
display: block;
color: #1129dc;
}
</style>
</head>
<body>
<h1>Example of the HTML "id" and "class" attributes:</h1>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<a href="#text2">Jump to the text-2</a>
<a href="#text3">Jump to the text-3</a>
<p id="text-1">
<strong>Text number 1</strong> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.
</p>
<p id="text2">
<strong>Text number 2</strong> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book
</p>
<p id="text3">
<strong>Text number 3</strong> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
<strong>Text number 4</strong> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
<strong>Text number 5</strong> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Selecionando um id com JavaScript
Como cada id é único, é a forma mais direta de acessar um único elemento via script. Duas abordagens comuns:
<button id="save-btn">Save</button>
<script>
// Fastest, dedicated method for ids:
const btn = document.getElementById("save-btn");
// querySelector uses the CSS #id selector (note the hash):
const sameBtn = document.querySelector("#save-btn");
btn.addEventListener("click", () => {
console.log("Saved!");
});
</script>getElementById recebe o valor do id sem o #, enquanto querySelector usa o seletor CSS #id completo. Ambos retornam apenas o primeiro elemento correspondente, o que é mais um motivo para manter os ids únicos.
Formulários e acessibilidade
Os ids são a forma como os elementos referenciam uns aos outros, tornando-os fundamentais para formulários acessíveis e suporte a leitores de tela:
<label for="…">conecta um rótulo a um controle de formulário cujoidcorresponde. Clicar no rótulo foca o campo, e a tecnologia assistiva anuncia o rótulo quando o campo recebe foco.aria-labelledby="…"nomeia um elemento usando o texto de outro elemento referenciado pelo seuid.aria-describedby="…"aponta para um elemento (peloid) que fornece ajuda adicional ou texto de erro.- Links de salto — um link "Pular para o conteúdo" (
href="#main") segmenta oidda região principal para que usuários de teclado possam ignorar a navegação.
<label for="email">Email address</label>
<input type="email" id="email" aria-describedby="email-help">
<p id="email-help">We'll never share your email.</p>Aqui for e aria-describedby referenciam ids, para que o navegador saiba que o rótulo, o campo e o texto de ajuda pertencem ao mesmo grupo.
Uma observação sobre especificidade CSS
O seletor CSS #id é altamente específico — muito mais forte do que um seletor de classe ou de elemento. Esse poder também é uma armadilha: regras escritas com ids são difíceis de sobrescrever e levam a "guerras de especificidade" em que você acumula mais seletores (ou !important) para vencer. Para estilização reutilizável, prefira classes; reserve os seletores #id para casos genuinamente pontuais. Para uma análise mais aprofundada sobre como escolher entre eles em folhas de estilo, consulte CSS id e class.