HTML5 como vocês deixam as tags?

Galera como vocês costuma deixar a tag do HTML?
Normalmente colocamos por exemplo “body” e “footer”
depois de pronto ja vi vídeos em que a galera muda o nome das tag para “div”

então esta assim:

Depois mudam para div assim:

o intuído do HTML5 é deixar é deixar desta fora certo?

13 Likes

Olá, antigamente usava-se divs para tudo, depois surgiram novas tags com a função de deixar o HTML mais semântico tanto para programadores, como para browsers e engines, então procure sempre usá-las para deixar o HTML o mais semântico possível.

Nesse Link fala sobre o assunto, vale a pena dar uma olhada.

9 Likes

umm usar div para tudo esta se tornando uma pratica antiga
entendi
obrigado vou dar uma olhada no link

1 Like

Boa noite. Na real, o footer fica dentro do body. Aí podem haver divs dentro deles. Mas lembrando, apenas oq está dentro do body aparece no site. Não remova o body.

4 Likes

Olá Matheus, complementando a opinião dos colegas, procure usar Divs apenas quando o que você precise fazer não tenha valor semântico? ou seja precisa ser feito apenas por uma questão de estilo, se for parte ativa da página sempre melhor usar as tags específicas, no inicio agente se confunde bastante mas com pratica e utilizando a documentação você vai ficar pegando o jeito.

4 Likes

Boa noite Matheus. Esses códigos tem alguns erros do ponto de vista da estrutura do html e do alinhamento dos elementos. O alinhamento dos elementos segue o padrão em que os filhos imediatos de um elemento se alinham a direita e os elementos irmãos se alinham no mesmo nível. Assim também as tags que abrem e fecham os elementos se alinham no mesmo nível, o correto seria:

<html>
  <head>
  </head>
  <body>
  </body>
</html>

Repare que html está no primeiro nível porque é o elemento pai, head e body ao serem irmãos ficam alinhados no mesmo nível, mas ao serem filhos diretos de html se alinham um espaço a direita.

Essa estrutura básica do html não pode mudar, que eu saiba não tem outras tags filhas diretas da tag html que não sejam head e body, todas as outras tags ou são filhas de head ou de body.

Footer que na primeira imagem estava como irmão de head e body na verdade deveria ser filho de body então ficaria alinhado a direita do mesmo assim:

<html>
  <head>
  </head>
  <body>
    <footer>
    </footer>
  </body>
</html>

Faz certo sentido a confusão de colocar footer no mesmo nivel que body porque um pensa encabeçado, corpo e rodapé mas as tags head e body vem de versões anteriores do html, e footer apareceu na vesão 5, na verdade footer tem umas tags irmãs que como <header> e <main> assim ficaria:

<html>
  <head>
  </head>
  <body>
    <header>
    </header>
    <main>
    </main>
    <footer>
    </footer>
  </body>
</html>

Outro erro que vi é que está fechando a tag <head> com uma tag </div>, isso está errado, cada tag fecha com o proprio fechamento que é a mesma tag de abertura precedida com uma /.

Sobre a conveniência de usar divs ou não é o que já disseram, visualmente não vá fazer diferencia mas usar as tags apropriadas tem outros benefícios que não passam pelo visual.

5 Likes

Deixe o mais semântico possível com as tags nativas do HTML. Existem outras que podem muito bem substituir as divs como por exemplo a section, main… Isso melhora a leitura do código e a compreensão.

2 Likes

entendi mano mas todo sentido

1 Like

uma TAG que eu n sei usar ainda é na “main”
estou praticando agora o front, fiquei mais na primeira semana

2 Likes

O objetivo da tag div é agrupar um bloco de código.
Já as outras tags como body e footer tem um significado, uma semântica.
Assim, é recomendado usar a tag certa para cada coisa, exemplo: em um cabeçalho usar a tag header.
Isso facilita a compreensão do código para leitores de tela facilitando a acessibilidade, ajuda a sua pagina ser melhor rankeada nos motores de busca, além de outras vantagens.
Sugiro pesquisar sobre html semântico, e pelo que observei na imagem é bom se atentar também a formatação da estrutura do código, suguiro dar uma pesquisada sobre identação no html. :wink:

2 Likes

O objetivo da main é colocar o conteúdo principal da sua aplicação, por exemplo, você pode abrir uma main como primeiro filho do body, como a “caixa” principal, vindo nela todo o conteúdo. Mas há outras formas também de usar, o importante é que ela está sempre relacionado ao tópico central da aplicação, ou a funcionalidade principal.

4 Likes

Entendi Giovanna, bom agora quando for construir o HTML de um projeto já terei uma noção maior, vou aplicar essas coisas nos projetos atuais que estou construindo,
muito obrigado!

1 Like

Estava olhando meus projetos aqui vou conseguir estruturar o html de uma forma mais consciente agora,
sempre me preocupei com a semântica, agora estou aprimorando ela,
obrigado pelo resposta!

1 Like

Boa! :rocket: Por nada!

1 Like

O uso dessas tags semânticas é bem útil tanto para interpretação dos programadores quanto para os navegadores. Se não me engano o uso delas ajuda na indexação de sites pelo Google.

2 Likes

Acredito que aqui mais uma vez cabe o famoso “depende”. Vamos analisar o que acontece na prática. :eyes:

Quando você vê boas práticas e regras de desenvolvimento modernas, você encontra as tags da web semântica, e compreende os benefícios de dividir a página em segmentos com significado, ótimo para acessibilidade, reconhecimento por máquina, indexação…

Como com quase tudo não termina por ser uma regra rígida. Quando você faz um HTML puro e direto, e estrutura uma página estática comum por exemplo, é muito simples fazer o header, o footer, section, aside…

Porém isso começa a mudar quando você se depara com a vasta quantidade de bibliotecas, frameworks, plataformas de desenvolvimento, que existem para desenvolvimento web. Não só muda o cenário na questão do seu controle de como a página é construída no final, como nas diversas formas de nomear, gerar, classificar os elementos, e como você trabalha com as ferramentas… além claro de que projeto se trata.

Sugiro abrir sites em geral, e acionar a ferramenta de inspeção, o “DevTools” do navegador. Na aba “Elements” dê uma analisada como as páginas chegaram no final.

Tente entrar em páginas conhecidas como www.microsoft.com ou mail.google.com e observe os elementos ali. Sim, você verá uma chuva de DIV.

Há outras formas de lidar com a acessibilidade ou indexação, e você verá abordagens diferentes, talvez uma propriedade “role” para definir o papel daquele segmento, como “main”, “presentation”…

Entre no site do Carrefour: https://www.carrefour.com.br/
É um cliente VTEX, que utiliza a plataforma. Você verá muitos “react_component” ali, e uma infinidade de DIVs.

São páginas bem mais complexas do que os modelos puros que se faz ao estudar HTML, e quase sempre construídas com frameworks ou bibliiotecas, react, angular, ou mesmo que somente estilizadas com Bootstrap. Você termina por “dar nome aos bois” através de abordagens como nomes de classes ou ids, ou poucos elementos semânticos contendo inúmeros div.

Claro que ao observar as documentações, você vê formas de construir páginas todas divididas em tags semânticas com biliotecas e frameworks, mas não é uma decisão tão simples num contexto de um negócio, como “usar ou não”.

Em resumo: ao constuir páginas puras em HTML, a orientação é fazer dessa maneira aí mesmo. E sempre haverá a orientação de fazer como “melhor prática”. Mas essa decisão pode mudar conforme o contexto vai se tornando mais complexo.
:wink:

3 Likes

O HTML tem muitas TAG massa, e possível que já tenha visto este vídeo mas caso não da uma olhadinha, nele mostra TAG muitos legais.

(7) 7 Tags HTML que Você Precisa Conhecer | Code/Drops #58 - YouTube

1 Like

Opa, sobre sua dúvida, o que me ajuda mto entender a questão do html semantico é que, as divs são para definir “caixas”, de forma geral, e existem algumas tags, que também separam a página em caixas, mas só que são mais específicas e tem um peso maior ne, como body, footer, header. Entao, sempre use a específica em cima da div, mesmo que a div funcione.

1 Like

Atualmente com o HTML5, as divs estão sendo incluídas quando se quer adicionar novas funcionalidades, mas do ponto de vista estrutural é mais semântico utilizar as novas tags, facilita na hora de identificar problemas ou realizar atualizações no código.

1 Like

Muito interessante sublevação agradeço a atenção,
agora que entendo como funciona os componente e tag’s do html, vou me atentar bastante nas semântica do HTMl e nas div’s ,