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.

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

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

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