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;
  }

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