Bom dia, iniciei o curso de programação, onde é criado o site "barbearia alura", eu estou meio perdido na questão de onde quando e porque usar as tags <div> <header> <main>, alguém poderia me explicar ?
Bom dia, iniciei o curso de programação, onde é criado o site "barbearia alura", eu estou meio perdido na questão de onde quando e porque usar as tags <div> <header> <main>, alguém poderia me explicar ?
Oi Giulliano, como você está?
As tags HTML têm o objetivo de demarcar a estrutura da página. A escolha de quando utilizar cada tag é feita a partir do objetivo que cada trecho de texto tem e também de como desejamos que o site seja visualmente.
O elemento <main> será utilizado para abrigar a parte mais importante do texto que precisamos exibir na página. O que está escrito dentro dela é o que entende-se como o conteúdo de maior relevância. No quesito visual, é o texto que ficará no centro da página.
Já <header> é o cabeçalho. É ali que escreveremos o título e talvez uma breve descrição do que é abordado na página e outras informações breves que possam se encaixar nesse objetivo. O texto contido nessa tag será exposto na parte superior da tela.
Esses dois elementos são tags semânticas. Existem também outros como <aside> (lateral) e <footer> (rodapé), por exemplo. Esse conjunto de tags veio como uma novidade na versão 5 do HTML e trouxe uma maior possibilidade de compreensão do computador sobre o significado do conteúdo de cada trecho de texto que existe em um site. Antes disso, a tag <div> era amplamente utilizada para fazer esse tipo de separação, gerando espaços em branco em diversos lugares da página para estruturar um layout mais agradável, e todas as informações ali contidas apresentavam o mesmo nível de importância. Hoje em dia, <div> é menos utilizado, mas ainda super útil para separar blocos de conteúdo. É um elemento genérico (sem valor de significado) que representa uma divisão: um bloco de espaço. Com a prática você terá mais conforto em saber quando utilizá-lo.
A estruturação a partir das tags semânticas possibilita maior acuracidade no trabalho de mecanismos de busca, além de otimizar o funcionamento de leitores de tela, melhorando a acessibilidade.
Deixo como recomendação para fins de estudo alguns artigos da Alura que comentam sobre as tags mais importantes do HTML:
Espero ter esclarecido suas dúvidas, Giulliano! Estou à disposição.
Forte abraço.