O id atributo HTML é 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 estilos. Também é usado pelo JavaScript para acessar e manipular o elemento com o ID específico.
A sintaxe do ID é: escreva um caractere de 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 principal:
<!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 e não deve conter espaços em branco (espaços, guias, 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 na página:
<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>
Marcadores HTML com ID e Links
Marcadores HTML são usados para permitir que os leitores pulem 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 depois adicionar um link a ele.
Em seguida, quando o link for clicado, a página irá rolar para o local com o marcador.
Exemplo
Primeiro, crie um marcador com o id atributo:
<h2 id="C4">Chapter 4</h2>
<!DOCTYPE html> <html> <body> <p><a href="#C4">Jump to Chapter 4</a></p> <p><a href="#C10">Jump to Chapter 10</a></p> <h2>Chapter 1</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 2</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 3</h2> <p>This chapter explains ba bla bla</p> <h2 id="C4">Chapter 4</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 5</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 6</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 7</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 8</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 9</h2> <p>This chapter explains ba bla bla</p> <h2 id="C10">Chapter 10</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 11</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 12</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 13</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 14</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 15</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 16</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 17</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 18</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 19</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 20</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 21</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 22</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 23</h2> <p>This chapter explains ba bla bla</p> </body> </html>
Usando o atributo id no JavaScript
O id atributo também pode ser usado pelo JavaScript para executar algumas tarefas para esse 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:
<!DOCTYPE html>
<html>
<body>
<h2>Using The id Attribute in JavaScript</h2>
<p>JavaScript usando o getElementById() método:</p>
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Mudar texto</button>
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "tenha um bom dia";
}
</script>
</body>
</html>
<< Anterior HTML O atributo da classe
Deixe um comentário