Dúvidas de colegas que vi na mentoria 04/05

Vi aqui que alguns colegas ficaram com dúvidas sobre id, class, div, section e etc. Vou tentar explicar como eu entendi, mas sintam-se livres pra me corrigir/complementar :slight_smile:

Com relação à div:

Exemplo de código dentro de um body no html:

image
Considerem que em vermelho eu tenho 2 div’s externas, dividindo o site horizontalmente.
Em azul, eu tenho duas seções dentro da primeira seção vermelha.
Em verde, eu tenho duas seções dentro da segunda seção vermelha.

Ficaria algo assim:

image

Embora você possa usar divs pra subdividir seções do site, aparentemente o HTML 5 hoje tem “tags” mais personalizadas pra diferentes seções do exemplo de página que mostrei acima. Isso ajuda a “dar nome aos bois” e dá mais significado do que uma div simplesmente.
image

Quanto a id e class
id e class funcionam como rótulos para diferentes partes/tags do seu HTML. É possível modificar o CSS referenciando não só pelas tags, mas pelas classes (colocando um ponto antes do nome da classe) ou pelo id (usando uma hashtag antes do nome do id). A diferença é que o id é único, enquanto uma mesma classe pode ser utilizada em diferentes partes do seu html.

Uma analogia seria a de que, se os alunos do Hiring Coders fossem tags em um HTML, meu id seria id=“Yasmin Marcaccini Guide”, enquanto todas as meninas, por exemplo, teriam a class class=“meninas”. Se eu quero modificar todas as meninas, eu uso a class. Se eu quero algo pontual, eu uso a id :blush:

Espero ter ajudado!

13 Likes

:clap::clap::clap:

Muito bom! :clap: :clap: :clap:

Amei a explicação!! Você já pode ser professora na Gama Academy :wink:
Eu estava com dúvidas sobre quando usar id e quando usar class, porque nas aulas da Kai isso não tinha ficado tão claro. Mas agora eu entendi! Acho que a prática vai me ajudar a usar corretamente as tags todas. Muito obrigada por esse tópico! :smiling_face_with_three_hearts:

1 Like