Atributo de identificação HTML

O objetivo deste artigo é fornecer uma compreensão mais profunda do HTML ID , como usá-lo e algumas práticas recomendadas a serem seguidas.

O atributo id do HTML é utilizado para identificar um id único para um elemento HTML – o mesmo id não pode ser atribuído a mais de um elemento no HTML .

Índice-

Sintaxe para ID

< id da tag = “valor” >

Usando o atributo id

Os elementos HTML são identificados por seus atributos id . Documentos HTML devem ter atributos id exclusivos .

Um atributo id de HTML identifica uma declaração de estilo específica em uma folha de estilo. O elemento com o id específico também é acessado e controlado por JavaScript .

Seria melhor se você começasse com um caractere hash ( # ) seguido do nome do seu ID . As propriedades CSS devem ser definidas entre chaves {} .

Aqui está um exemplo com um elemento <h1> com o id “myHeader”.

Ele será estilizado de acordo com a definição de estilo #myHeader no <h1> :

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Lembrete: observe que o nome da ID diferencia maiúsculas de minúsculas. Deve ter um nome que contenha pelo menos um caractere e esteja livre de espaços em branco (espaços, tabulações, etc.).

ID em formulários

Aqui está um exemplo de id usando no formulário cada elemento do formulário tem seu ID único.

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<body>
<form id="form">
<fieldset style="background: rgb(158, 156, 156); border: 2px solid #705831;">
<legend id="user">User Data</legend>
<input id="firstname" type="text" placeholder="First name" name="firstname"><br><br>
<input id="lastname" type="text" placeholder="Last name" name="lastname"><br><br>
<input id="email" type="text" placeholder="Email" name="email"><br><br>
<input id="usersubmit" type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Diferença entre classe e ID

Um nome de classe pode ser utilizado por mais de um elemento HTML em uma página, enquanto um nome de ID HTML só pode ser operado uma vez.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head><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>
</head><body>
<!-- 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>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Nota: Visite nosso Tutorial de CSS para aprender muito mais sobre CSS.

Aqui está outro exemplo de atributo Id:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>
Id attribute example
</title>
<style>
#company {
padding: 25px;
background-color: purple;
color: white;
text-align: center;
}
#owner
{
padding: 20px;
background-color: blue;
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Stying Id attribute with CSS </p>
<h2 id="company"> Microsoft </h2>
<h2 id="owner"> Bill Gates </h2>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Um marcador HTML permite ao usuário ir para seções específicas de um site. Um marcador pode ser útil se você tiver uma página longa no que diz respeito ao ID HTML .

É necessário criar um marcador primeiro e depois criar um link para ele.

Depois de clicar no link, a página rolará para o local do marcador.

Exemplo

Como primeiro passo, crie um marcador que tenha um atributo id OU ID HTML :

<h2 id=”bil”>Bookmarks with ID and Links</h2>

Em seguida, inclua um link para o marcador (“seção Goto Bookmarks with ID and Links”), dentro da mesma página:

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<a href="#bil">Goto Bookmarks with ID and Links section</a>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Quando falamos sobre ID HTML, você também pode adicionar um link para o marcador (“Ir para a seção Favoritos com ID e Links”) de outra página:

<a href=”html_demo.html#bil”>Goto Bookmarks with ID and Links section</a>

Usando o atributo id em JavaScript

O JavaScript também pode executar algumas operações em elementos com o atributo id .

Com o método getElementById() , o JavaScript pode acessar elementos com IDs específicos:

O atributo id OU id HTML pode ser usado para manipular texto em JavaScript:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice weekend!";
}
</script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Nossas próximas lições de JavaScript cobrirão JavaScript, ou você pode estudá-lo no capítulo HTML JavaScript .

Vantagens de usar o atributo HTML ID

O atributo HTML ID é uma ferramenta útil para desenvolvedores da Web, pois fornece um identificador exclusivo para elementos em uma página da Web. Aqui estão algumas vantagens de usar o atributo HTML ID:

Exclusividade: o atributo ID garante que um elemento possa ser identificado e manipulado sem afetar outros elementos da página.

Especificidade: o atributo ID tem um nível mais alto de especificidade do que outros seletores CSS, como classes, tornando-o mais preciso para estilos direcionados.

Acessibilidade: o uso de nomes de identificação significativos aumenta a acessibilidade de um site para usuários que dependem de tecnologias assistivas.

SEO: usar nomes de ID exclusivos e relevantes pode otimizar um site para os mecanismos de pesquisa.

Manipulação de JavaScript: O atributo ID é útil para identificar elementos em JavaScript, permitindo a criação de páginas web dinâmicas e interativas.

Organização: O uso de nomes de ID exclusivos pode ajudar a manter o código HTML organizado e fácil de ler e manter.

Links âncora: o atributo ID pode ser usado para criar links âncora, permitindo que os usuários pulem diretamente para uma seção específica da página.

Estilo: o atributo ID pode ser usado para aplicar estilos específicos a elementos individuais em uma página da Web, como cabeçalhos, imagens ou outros elementos importantes.

Se este artigo de alguma forma atendeu aos seus requisitos educacionais, compartilhe-o com seus amigos clicando nos links abaixo.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.