Atributo id HTML

HTML id A propriedade é usada para especificar um id único para o elemento HTML.

Um documento HTML não pode conter elementos com o mesmo id múltiplas vezes.

Uso da propriedade id

id A propriedade especifica um ID único para o elemento HTML. id O valor da propriedade deve ser único no documento HTML.

id A propriedade é usada para apontar para declarações de estilo específicas no estilo de folha. JavaScript também pode usá-lo para acessar e operar elementos com um ID específico.

A sintaxe do id é: escrever um sinal de número (#), seguido de um nome de id. Em seguida, defina as propriedades CSS dentro de chaves {}.

no exemplo a seguir temos um <h1> que aponta para o nome do id "myHeader". Este <h1> O elemento será baseado no elemento #myHeader Definições de estilo são usadas para definir estilos:

Exemplo

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">Meu Cabeçalho</h1>
</body>
</html>

Experimente você mesmo

Notas:O nome do id é sensível a maiúsculas e minúsculas!

Notas:O id deve conter pelo menos um caractere e não pode conter caracteres de espaço (espaços, tabulações, etc.).

Diferenças entre Class e ID

O mesmo nome de classe pode ser usado por vários elementos HTML, enquanto um nome de id pode ser usado apenas por um elemento HTML na página:

Exemplo

<style>
/* Definir estilos para o elemento com o id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
/* Definir estilos para todos os elementos com a classe "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
<!-- Elementos com um id único -->
<h1 id="myHeader">Minhas Cidades</h1>
<!-- Múltiplos elementos com o mesmo nome de classe -->
<h2 class="city">London</h2>
<p>London é a capital da Inglaterra.</p>
<h2 class="city">Paris</h2>
<p>Paris é a capital da França.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo é a capital do Japão.</p>

Experimente você mesmo

Dica:Por favor, consulte nossa Tutorial de CSS aprenda mais sobre CSS.

Implementação de marcadores HTML através de ID e link

Os marcadores HTML são usados para permitir que os leitores saltam para partes específicas da página da web.

Se a página for longa, o marcador pode ser muito útil.

Para usar o marcador, você deve primeiro criá-lo e então adicioná-lo como link.

Então, quando você clicar no link, a página será rolada para a posição com o marcador.

Exemplo

Primeiro, id Propriedade de criação de marcadores:

<h2 id="C4">Capítulo 4</h2>

Então, na mesma página, adicione um link para este marcador ("Ir para o Capítulo 4"):

Exemplo

<a href="#C4">Ir para o Capítulo 4</a>

Experimente você mesmo

Ou, em outra página, adicione um link para este marcador ("Ir para o Capítulo 4"):

<a href="html_demo.html#C4">Ir para o Capítulo 4</a>

Uso da propriedade id no JavaScript

O JavaScript também pode usar a propriedade id para executar algumas tarefas em elementos específicos.

O JavaScript pode usar getElementById() Método para Acessar Elementos com ID Específico:

Exemplo

Use a propriedade id para manipular texto com JavaScript:

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

Experimente você mesmo

Dica:por favor, em JavaScript HTML neste capítulo, ou em Tutorial de JavaScript aprenda JavaScript aqui.

Resumo do Capítulo

  • id A propriedade é usada para especificar um ID único para elementos HTML
  • id O valor da propriedade deve ser único no documento HTML
  • CSS e JavaScript podem usar id A propriedade pode ser usada para selecionar elementos ou definir estilos específicos para elementos
  • id O valor da propriedade distingue maiúsculas e minúsculas
  • id A propriedade também pode ser usada para criar marcadores HTML
  • O JavaScript pode usar getElementById() Método para Acessar Elementos com ID Específico