Onde usar div no HTML/CSS com exemplos
Neste artigo você aprenderá onde usar div nos seus projetos webs, com exemplos práticos e melhores situações para o elemento.
Conheça nosso canal no YouTube, com cursos gratuitos de qualidade e vídeos semanais, para acessar o canal clique aqui!
Onde usar div?
Uma dúvida de muitos iniciantes no mundo web e também de pessoas que já tem certo domínio é: onde utilizo uma div?
Pois o elemento, por não ter um nome muito óbvio, nos deixa sem saber qual o melhor local para utilizá-lo
Mas é exatamente esta questão do nome, de ser amplo, que trás a versatilidade para a tag div
Nós podemos utilizar ela principalmente para delimitar containers de elementos ou também podemos chamar de componentes
Um exemplo:
<div><h1>Nome do Produto</h1><p>Descrição do produto</p><p>R$10,00</p></div>
Este componente acima, por exemplo, é a descrição de um produto
Percebam que os elementos dentro da div participam de um contexto semelhante, eles estão ligados por um assunto principal: O produto
Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.
Então este é um caso clássico do uso de divs, quando há elementos que compactuam com o mesmo sentido podemos encapsular eles em uma div
Outro caso de uso legal para divs é quando há uma repetição constante de elementos, por exemplo: cards de imagens
Então criando esse layout de cada card em uma div, nós temos mais controle de fazer alterações na estrutura dependendo da resolução do usuário
Por exemplo: com CSS posso modificar estas divs em um grid para desktop e em mobile uma embaixo da outra
<div id=”container”><div class=”card”><img src=”…”><p>Descrição da imagem</p></div><div class=”card”><img src=”…”><p>Descrição da imagem</p></div><div class=”card”><img src=”…”><p>Descrição da imagem</p></div></div>
Aqui neste exemplo usamos uma estratégia div servindo de container também, há uma div de id container abrigando os cards
E depois temos cada card em uma div com classe de card
Perceba a diferenciação de abordagem que por causa de uma classe e id, conseguem ter tanto quanto utilidade como também estilos completamente diferentes
Onde não usar div
Mais importante que saber onde utilizar é saber onde não utilizar divs, então vamos ver alguns bons exemplos
Você não deve utilizar divs no HTML quando há elementos semânticos que encaixam melhor seu código
Por exemplo: rodapé do site, use a tag footer em vez de div
Entenda o elemento footer, clicando aqui!
Elementos semânticos são tags do HTML que vieram na sua versão 5, estas tags ajudam o seu código a ter mais sentido tanto para pessoas que programam quanto para os que não
Pois seus nomes são bem objetivos, deixando clara a sua utilização em uma página web
Outra dica interessante é que em um menu de navegação de um site você deve usar a tag nav em vez de div
Conheça melhor o elemento nav, clicando aqui!
Essas tags de HTML5 além de darem mais sentido ao código e deixá-lo com manutenção mais fácil
Ajudam o seu site a ganhar SEO (Search Engine Optimization) e consequentemente ficar melhor posicionado no Google
Conclusão
Vimos que divs devem ser utilizadas basicamente quando há uma necessidade de agrupar elementos com o mesmo sentido (caso da descrição do produto)
Ou também para grandes containers, dividindo seções do código
Mas atenção para seções do site utilize o elemento semântico section!
E também aprendemos que não devemos usar uma div quando há um elemento semântico que se encaixa melhor no contexto
E por hoje é isso, até o próximo post!
Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo
