HTML div: aprenda como utilizar a tag div para agrupar outros elementos
Nesta documentação você aprenderá sobre o elemento HTML Div, como aplicar a tag <div> em código HTML e como podemos utilizá-la para agrupar e delimitar outros elementos HTML.
<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 |
Artigos relacionados
-
Artigo
-
Artigo
-
Artigo
-
Artigo
-
Artigo