Tutorial HTML

HTML HOME Introdução HTML Editores de HTML HTML básico Elementos HTML Atributos HTML Títulos HTML Parágrafos HTML Estilos HTML Formatação HTML Cotações HTML Comentários HTML Cores HTML HTML CSS Links HTML Imagens HTML HTML Favicon Tabelas HTML Listas HTML Bloco HTML e Inline Classes HTML Código HTML Iframes HTML JavaScript HTML Caminhos de arquivo HTML Cabeçalho HTML Esquema HTML HTML Responsivo Código de computador HTML Semântica HTML Guia de estilo HTML Entidades HTML Símbolos HTML Emojis HTML Conjunto de caracteres HTML Codificação de URL HTML HTML vs. XHTML

Formulários HTML

Formulários HTML Atributos de formulário HTML Elementos de formulário HTML Tipos de entrada HTML Atributos de entrada HTML Atributos do formulário de entrada HTML

Gráficos HTML

Tela HTML HTML SVG

Mídia HTML

Mídia HTML Vídeo HTML Áudio HTML Plug-ins HTML HTML YouTube

APIs HTML

Geolocalização HTML Arrastar/Soltar HTML Armazenamento Web HTML Trabalhadores da Web HTML HTML SSE

Exemplos HTML

Exemplos HTML Questionário HTML Exercícios HTML Certificado HTML Resumo HTML Acessibilidade HTML

Referências HTML

Lista de tags HTML Atributos HTML Atributos Globais HTML Suporte ao navegador HTML Eventos HTML Cores HTML Tela HTML Áudio/vídeo HTML Tipos de documento HTML Conjuntos de caracteres HTML Codificação de URL HTML Códigos HTML Lang Mensagens HTTP Métodos HTTP PX to EM Converter Atalhos do teclado

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 idatributo especifica um ID exclusivo para um elemento HTML. O valor do id atributo deve ser exclusivo no documento HTML.

O idatributo é 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 idatributo:

<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 idatributo 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 idatributo 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 idatributo é 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

Exercícios HTML

Teste-se com exercícios

Exercício:

Adicione o atributo HTML correto para tornar o elemento H1 vermelho.

<!DOCTYPE html>
<html>
<head>
<style>
#myheader {color:red;}
</style>
</head>
<body>

<h1>Minha página inicial</h1>

</body>
</html>