Neste artigo, mostrarei como usar ID e classe em HTML, esses são dois atributos muito importantes, nos ajuda a combinar com CSS facilmente.

Cada tag HTML tem seus próprios e diferentes atributos. Porém, com os atributos ID e Class, 100% das tags podem ser utilizadas. ID é como seu número de identificação, e classe é como seu gênero. Vamos descobrir os detalhes juntos.

O que é ID em HTML?

ID em HTML é uma string única e identificadora, usada para anexar a uma determinada tag HTML. Em um arquivo HTML, o ID é exclusivo, o que significa que você não pode definir 1 ID para 2 tags HTML.

A nomenclatura dos IDs deve seguir as seguintes regras :

• Nome dado em inglês e sem acentos, sem espaços, sem caracteres especiais.
• A nomeação faz sentido, ajudando-nos a olhar para o ID para saber para que serve o cartão.

Exemplo : crio uma caixa de diálogo que exibe um código de desconto e usarei uma tag div para cercar toda a caixa de diálogo. Então eu não esqueci de definir o ID para ele como " discount_wrapper ".

 <div id="discount_wrapper"> </div>

Agora, se você quiser usar CSS para editar essa tag, use a seguinte sintaxe:

 #discount_wrapper{ background:red; height: 300px }

Resumindo, se você quiser usar CSS para consultar o ID, use a sintaxe #ten_id .

O que são classes em HTML?

Se o ID for exclusivo em um arquivo de documento HTML, a classe será diferente, ela será usada para estabelecer uma classe de objetos que compartilham uma característica comum. Assim, você pode anexar uma classe a muitas tags HTML diferentes.

A nomeação da classe também deve seguir as regras que instruí na parte 1.

Exemplo : quero exibir uma lista de posts, e cada post vou chamar de bloco. Assim, se houver 100 posts, precisarei de 100 blocos. Se usarmos ID para definir esses 100 blocos, é muito difícil. Então, vamos colocar uma classe para 100 blocos, e só precisamos escrever CSS para essa classe e os outros 100 blocos serão aplicados CSS imediatamente.

 <div class="post"> Post 1 </div> <div class="post"> Post 2 </div> <div class="post"> Post 3 </div> <div class="post"> Post 4 </div> <div class="post"> Post 5 </div> <div class="post"> Post 6 </div>

Em CSS eu escreveria o seguinte:

 .post{ background:red; height: 100px; margin: 20px; }

Assim, usamos o . para classe e # para ID.

Quando usar ID e quando usar classe?

Esta é uma pergunta que muitos de vocês me fizeram. Para responder, é preciso rever os dois conceitos que apresentei acima.

• O ID é exclusivo em um conjunto de documentos HTML. Portanto, você deve configurá-lo se a estrutura do site existir apenas em uma posição, ou seja, CSS não tem herança.
• A classe é diferente, pode anexar classes a muitas tags HTML diferentes. Portanto, você deve usá-lo caso queira que diferentes tags HTML possam herdar o CSS umas das outras.

Por meio deste tutorial, terminei de mostrar como usar IDs e classes em HTML. Essa é uma questão importante, é a premissa para você aprender as próximas lições. Por favor, assista com atenção, se você tiver alguma dúvida, por favor, comente para que eu possa respondê-las.