Atributo de código HTML
O atributo HTML id
é usado para especificar um id exclusivo para um elemento HTML.
Você não pode ter mais de um elemento com o mesmo id em um documento HTML.
Usando o atributo id
O id
atributo especifica um ID exclusivo para um elemento HTML. O valor do id
atributo deve ser exclusivo no documento HTML.
O id
atributo é usado para apontar para uma declaração de estilo específica em uma folha de estilo. Também é usado pelo JavaScript para acessar e manipular o elemento com o id específico.
A sintaxe para id é: escreva um caractere hash (#), seguido por um nome de id. Em seguida, defina as propriedades CSS entre chaves {}.
No exemplo a seguir temos um <h1>
elemento que aponta para o nome do id "myHeader". Este <h1>
elemento será estilizado de acordo com a #myHeader
definição de estilo na seção head:
Exemplo
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My
Header</h1>
</body>
</html>
Nota: O nome do id diferencia maiúsculas de minúsculas!
Nota: O nome do id deve conter pelo menos um caractere, não pode começar com um número e não deve conter espaços em branco (espaços, tabulações, etc.).
Diferença entre classe e ID
Um nome de classe pode ser usado por vários elementos HTML, enquanto um nome de id deve ser usado apenas por um elemento HTML dentro da página:
Exemplo
<style>
/* Style the element with the id "myHeader"
*/
#myHeader {
background-color: lightblue;
color: black;
padding:
40px;
text-align: center;
}
/* Style all
elements with the class name "city" */
.city
{
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<!-- An element with a unique id -->
<h1 id="myHeader">My
Cities</h1>
<!-- Multiple elements with same class -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
Dica: Você pode aprender muito mais sobre CSS em nosso Tutorial de CSS .
Marcadores HTML com ID e Links
Os marcadores HTML são usados para permitir que os leitores saltem para partes específicas de uma página da web.
Os marcadores podem ser úteis se sua página for muito longa.
Para usar um marcador, você deve primeiro criá-lo e, em seguida, adicionar um link a ele.
Então, quando o link for clicado, a página rolará para o local com o marcador.
Exemplo
Primeiro, crie um marcador com o id
atributo:
<h2 id="C4">Chapter 4</h2>
Em seguida, adicione um link ao favorito ("Pular para o Capítulo 4"), de dentro da mesma página:
Exemplo
<a href="#C4">Jump to Chapter 4</a>
Ou adicione um link ao favorito ("Pular para o Capítulo 4"), de outra página:
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Usando o atributo id em JavaScript
O id
atributo também pode ser usado pelo JavaScript para realizar algumas tarefas para aquele elemento específico.
JavaScript pode acessar um elemento com um id específico com o getElementById()
método:
Exemplo
Use o id
atributo para manipular texto com JavaScript:
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
Dica: Estude JavaScript no capítulo HTML JavaScript ou em nosso Tutorial JavaScript .
Resumo do capítulo
- O
id
atributo é usado para especificar um id exclusivo para um elemento HTML - O valor do
id
atributo deve ser exclusivo no documento HTML - O
id
atributo é usado por CSS e JavaScript para estilizar/selecionar um elemento específico - O valor do
id
atributo diferencia maiúsculas de minúsculas - O
id
atributo também é usado para criar marcadores HTML - JavaScript pode acessar um elemento com um id específico com o
getElementById()
método