Artigos HTML e CSS HTML div: aprenda como utilizar a tag div para agrupar outros elementos

<div>

A tag <div> é um elemento HTML que serve como um contêiner genérico, podendo receber diferentes tipos de conteúdos (texto, imagens etc.).

A <div> é um elemento bastante utilizado para a construção de layouts de páginas web e pode facilmente ser estilizado com o uso do CSS.

Como utilizar a tag <div>?

A tag <div> é utilizada para agrupar e delimitar conteúdos e para isso esses conteúdos devem ser declarados entre a tag de início e a tag de fechamento (<div></div>).

A tag <div> agrupa todo conteúdo que é adicionado a ela, mas não possui um estilo visual por padrão.

Entretanto, é possível utilizar o CSS para tornar a <div> visível, além de aplicar novos estilos tais como: cores de fundo, cor de fonte, estilo de fonte e posicionamento dos elementos internos da <div>, por exemplo.

<div>: na prática

<div id='demonstracao'>
  <h1>Devmedia</h1>
  <img src='https://www.devmedia.com.br/' alt='logomarca'/>
  <ul>
     <li>JavaScript</li>
     <li>Python</li>
     <li>PHP</li>
     <li>Java</li>
  </ul>
</div>

Sintaxe

<div>
    <p>texto…</p>
    <img src='URL'/>
</div>

Configuração padrão de CSS

O elemento <div> inicia por padrão com a propriedade display do tipo block e a maioria dos navegadores exibirá o elemento já com este valor padrão.

Ao inspecionar o elemento criado o mesmo deve possuir o seguinte valor padrão:

div {
    display: block;
}
tag div html

Exemplos de uso da <div>

Exemplo 1

No Código 1 demonstraremos um exemplo de como utilizar o elemento <div> da forma mais simples possível.

<div>
  <h1>Elemento Div com 1 título e 2 parágrafos</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex finibus, tempor justo a, scelerisque lectus. Sed commodo pulvinar eros, id pulvinar odio tincidunt eu.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex finibus, tempor justo a, scelerisque lectus. Sed commodo pulvinar eros, id pulvinar odio tincidunt eu.</p>
</div>
Código 1. Exemplo de uso simples do elemento <div>

Note que neste exemplo o elemento div não fica aparente, pois não foi utilizado o CSS para fazer a sua estilização.

Exemplo 2

Nos Códigos 2 e 3 demonstraremos como utilizar o elemento <div> em conjunto com o CSS.

<div>
  <h1>Elemento Div com 1 título e 2 parágrafos</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex finibus, tempor justo a, scelerisque lectus. Sed commodo pulvinar eros, id pulvinar odio tincidunt eu.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex finibus, tempor justo a, scelerisque lectus. Sed commodo pulvinar eros, id pulvinar odio tincidunt eu.</p>
</div>
Código 2. Código HTML
div {
  width: 560px;
  background-color: yellow;
}
Código 3. Código CSS

Note que neste exemplo o elemento div tem o seu tamanho delimitado com 560px de largura e também possui uma cor de fundo amarela. Essa estilização foi estabelecida através do código CSS.

Exemplo 3

Nos Códigos 4 e 5 demonstramos mais um exemplo de como utilizar o CSS em conjunto do elemento div.

<h1>Exemplo - Elemento Div</h1>

<div class="demoDiv">
  <h2>Título dentro do elemento div</h2>
  <p>Parágrafo dentro do elemento div.</p>
</div>

<p>Parágrafo fora do elemento div.</p>
Código 4. Código HTML
.demoDiv {
  border: 5px outset red;
  background-color: #ED30CF;
  color: white;
  font-weight: 600;
  text-align: center;
}
Código 5. Código CSS

Note que neste exemplo o elemento <div> recebeu uma classe de nome demoDiv.

Através desta classe o elemento <div> vai receber as propriedades implementada pelo código CSS.

Exemplo 4

Nos Códigos 6 e 7 demonstraremos como aplicar o elemento <div> de forma aninhada (um elemento dentro do outro) e também como utilizar o CSS para implementar o posicionamento entre esses elementos.

<div id='containerTotal'>

  <h1>Exemplo - Elemento Div</h1>
  <div class='containerDivs'>
    <div class="demoDiv">
      <h2>Primeiro elemento div</h2>
      <p>Parágrafo dentro do primeiro elemento div.</p>
    </div>

    <div class="demoDiv">
      <h2>Segundo elemento div</h2>
      <p>Parágrafo dentro do segundo elemento div.</p>
    </div>

    <div class="demoDiv">
      <h2>Terceiro elemento div</h2>
      <p>Parágrafo dentro do terceiro elemento div.</p>
    </div>
  </div>
</div>
Código 6. Código HTML
#containerTotal {
  padding: 0px 20px 30px;
  display: flex;
  flex-direction: column;
  background-color: orange;
}

.containerDivs {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.demoDiv {
  width: 30%;
  border: 5px outset red;
  background-color: yellow;
  font-weight: 600;
  text-align: center;
}
Código 7. Código CSS

Note que neste exemplo temos cinto tags <div> e que elas estão servindo como containers para agrupar outros elementos.

Utilizamos o CSS para ajustar o posicionamento das tags <div> até que eles fiquem com a aparência do exemplo acima.

Compatibilidade com navegadores

A <div> é suportada em todos os navegadores apresentados na tabela abaixo:

<div> Chrome Mozilla Firefox Edge / IE Opera Safari
Sim Sim Sim Sim Sim

Benefícios do uso da tag <div>

  • Flexibilidade: Funciona como um container para organizar conteúdo e estruturar layouts, pode ser usado para qualquer tipo de conteúdo, essa versatilidade permite criar layouts complexos sem precisar se preocupar com limitações do elemento.
  • Compatibilidade: É suportada por todos os navegadores modernos e antigos, garantindo consistência na exibição de conteúdos.
  • Personalização: Por não possuir um estilo visual por padrão, pode ser personalizada completamente por meio da linguagem CSS.
  • Base para frameworks: Frameworks como Bootstrap e Tailwind CSS utilizam como base para construir sistemas responsivos.
  • Estruturas flexíveis e responsivas: Na composição de layouts flexíveis e adaptáveis a <div> continua a ser um recurso poderoso, como por exemplo o Flexbox.
  • Renderização dinâmica: Ferramentas de renderização de front-end, como React e Angular, frequentemente utilizam <div> como container para componentes dinâmicos.

Boas práticas

  • Evite o excesso de <div> sem necessidade, para manter o código limpo e legível.
  • Procure utilizar classes e IDs descritivos para facilitar a manutenção e a aplicação de estilos.
  • Combine a <div> com atributos de acessibilidade, sempre que necessário.

Isso demonstra que, mesmo com novas abordagens, a <div> ainda desempenha um papel central no desenvolvimento web, sendo relevante e recomendada, mas é necessário usá-la de forma estratégica, alinhada às boas práticas de desenvolvimento moderno.

Criação de interfaces dinâmicas com inteligência artificial

A tag <div> é essencial na construção de interfaces dinâmicas, já que integrada à IA, ela permite que elementos interativos sejam organizados e estilizados de maneira eficiente. Por exemplo, chatbots que dependem da <div> para estruturar e gerenciar os componentes.

Uso da tag <div> em aplicações com IA

  • Na renderização de interfaces criadas por frameworks, como React, baseados em IA, os componentes dinâmicos serão encapsulados pela tag div. Por exemplo, um chatbot seja inserido dentro de uma <div> que controlará seu layout e posição na tela.
  • Ao apresentar dados gerados por modelos de IA, a tag <div> é usada como base para restringir os espaços de interação.
  • Na adaptação da interface de acordo com dados gerados pela IA, como recomendações, conteúdo personalizável e adaptação flexível.

Com IA, um sistema pode dinamicamente adicionar novas <div> para mensagens ou botões de interação.