Tag HTML <div>
Veja como usar a tag <div> para agrupar elementos HTML e estilizá-los com CSS, como aplicar class, id, style e outros atributos à tag <div>.
A tag <div> é um contêiner usado para definir uma divisão ou seção. É um elemento de nível de bloco que não afeta o conteúdo por si só, mas é utilizado principalmente para agrupar elementos HTML a serem estilizados com CSS ou manipulados com scripts.
Como <div> é um elemento de nível de bloco, cada um começa em uma nova linha e se estende para preencher a largura disponível. Ele não carrega nenhum significado semântico próprio — é uma caixa genérica. Use <div> para agrupar conteúdo de nível de bloco; para agrupar ou estilizar conteúdo inline (algumas palavras dentro de uma frase), use o equivalente inline, a tag <span>.
Posicionamento de Blocos Definidos pela Tag <div>
Como <div> é um elemento de nível de bloco, uma quebra de linha é inserida antes e depois dele.
É possível colocar qualquer elemento HTML dentro de uma tag <div>, incluindo outro <div>.
Elementos de nível de bloco como <div> não podem ser aninhados dentro de tags <p>, pois o parágrafo será interrompido no ponto em que a tag <div> for inserida.
Para aplicar estilos dentro de um parágrafo, use a tag <span>, que é utilizada com elementos inline.
Sintaxe
A tag <div> vem em pares. O conteúdo é escrito entre as tags de abertura (<div>) e fechamento (</div>).
Exemplo da tag HTML <div>:
Exemplo da tag HTML <div>
<!DOCTYPE html>
<html>
<head>
<title>The <div> Tag</title>
</head>
<body>
<h1> The <div> Tag </h1>
<div style="background-color:#8ebf42">
<p>We use the <div> tag to group two paragraphs for applying a background to the text, and to add color to this
<span style="color:#1c87c9">word</span> we place it within <span> tag.</p>
<p> Pay attention, that the <div> tag is a block-level element, so a line break is placed before and after
it.</p>
</div>
</body>
</html><div> vs. Elementos Semânticos
Um <div> é a ferramenta certa quando você precisa apenas de uma caixa genérica para aplicar estilos ou scripts. Mas quando a caixa representa uma região significativa da página — navegação, cabeçalho, artigo — prefira o elemento semântico HTML5 correspondente. As tags semânticas descrevem o que é o conteúdo, o que ajuda mecanismos de busca, leitores de tela e outros desenvolvedores a entenderem sua marcação.
Compare a mesma estrutura escrita de duas formas:
<!-- Before: generic divs, no meaning -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="main">...</div>
<div class="footer">...</div>
<!-- After: semantic elements, self-describing -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>Ambas são renderizadas de forma idêntica por padrão, mas a segunda versão é muito mais acessível e fácil de manter.
Cuidado com a "div soup". Envolver tudo em elementos <div> aninhados — <div class="nav">, <div class="header">, e assim por diante — produz uma marcação difícil de ler e não oferece nada útil para tecnologias assistivas. Antes de adicionar um <div>, pergunte se <nav>, <header>, <main>, <article>, <section> ou <footer> se encaixa melhor.
<div> vs. <span>
As tags <div> e <span> são ambas contêineres genéricos e sem significado — a diferença está no tipo de caixa que criam:
<div>é de nível de bloco. Começa em uma nova linha, preenche a largura disponível e é usado para agrupar seções maiores de conteúdo (parágrafos, listas, outros divs).<span>é inline. Flui dentro de uma linha de texto e é usado para estilizar ou selecionar um pequeno trecho de conteúdo, como uma palavra ou frase.
<p>The word <span style="color:#1c87c9">highlighted</span> sits inside the text flow.</p>
<div style="background-color:#8ebf42">
<p>This whole block is grouped and given a background.</p>
</div>Como regra geral: use <div> para agrupar conteúdo de nível de bloco e <span> para envolver conteúdo inline.
Quando construímos layouts, lidamos com múltiplos blocos definidos pela tag <div>. O posicionamento desses blocos é o cerne do layout: posicionar elementos nas posições relativas corretas em todos os tamanhos de tela é uma das tarefas mais importantes.
Dependendo do conteúdo e dos objetivos da página, podemos usar diferentes técnicas (ou combinações delas) para determinar o lugar de cada bloco. Para layouts modernos, as duas ferramentas que você deve usar primeiro são o CSS Grid (para layouts bidimensionais, em linhas e colunas) e o Flexbox (para linhas ou colunas unidimensionais). As técnicas mais antigas abaixo — floats, margens negativas e posicionamento absoluto — ainda funcionam, mas raramente são a melhor escolha hoje em dia.
CSS Grid
O CSS Grid é a forma moderna e padrão de criar layouts bidimensionais — ou seja, layouts que organizam blocos <div> em linhas e colunas ao mesmo tempo. Você define um grid no contêiner com display: grid e descreve suas trilhas, e então os blocos filhos fluem para as células.
Exemplo da tag HTML <div> com CSS Grid:
Exemplo da tag HTML <div> com CSS Grid
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
padding: 10px;
background-color: #1faadb;
}
.grid-container > div {
height: 60px;
border-radius: 3px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="grid-container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>Este único grid-template-columns: 1fr 1fr 1fr cria três colunas iguais, e os seis blocos <div> se distribuem automaticamente em duas linhas.
Flexbox
Quando você precisa apenas organizar itens ao longo de um único eixo — uma linha ou uma coluna — o Flexbox é a ferramenta certa. Nos sites modernos, os layouts baseados em float estão sendo substituídos por Flexbox e CSS Grid. A ideia principal do Flexbox é que com ele você pode controlar o alinhamento, a direção, a ordem e o tamanho dos itens dentro do contêiner.
Exemplo de Flexbox com a tag HTML <div>:
Exemplo da tag HTML <div> com Flexbox
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
align-items: center; /* Use another value to see the result */
width: 100%;
height: 200px;
background-color: #1faadb;
}
.flex-container > div {
width: 25%;
height: 60px;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="flex-container">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>Propriedade float do CSS
A propriedade float do CSS, ou "floats", permite que os elementos apareçam lado a lado ou separados uns dos outros, o que nos permite criar diferentes tipos de layouts, incluindo páginas de múltiplas colunas, barras laterais, grids, etc.
Exemplo da tag HTML <div> com a propriedade float do CSS:
Exemplo da tag HTML <div> com a propriedade float do CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.content {
overflow: auto;
border: 3px solid #666;
}
.content div {
padding: 10px;
}
.content a {
color: darkblue;
}
.blue {
float: right;
width: 45%;
background-color: #1faadb;
}
.green {
float: left;
width: 35%;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="blue">
<p>This is some paragraph inside div tag.</p>
<a href="#">This is some hyperlink inside div tag.</a>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</div>
<div class="green">
<p>This is some paragraph inside div tag.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
</div>
</div>
</body>
</html>Resultado
Margens Negativas (técnica legada)
Margens negativas podem ser aplicadas tanto a elementos estáticos quanto a elementos flutuantes para aproximar blocos ou fazê-los se sobrepor.
Exemplo de margens negativas:
Exemplo da tag HTML <div> com margens negativas
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.content div {
padding: 2%;
}
.content a {
color: darkblue;
}
.main-content {
width: 30%;
margin-left: 32%;
}
.blue {
width: 25%;
margin-top: -10%;
background-color: #1faadb;
}
.green {
width: 20%;
margin: -35% auto auto 70%;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="main-content">
<a href="#">This is some hyperlink inside div tag.</a>
</div>
<div class="blue">
<p>This is some paragraph inside div tag.</p>
<a href="#">This is some hyperlink inside div tag.</a>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</div>
<div class="green">
<p>This is some paragraph inside div tag.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
</div>
</div>
</body>
</html>Posicionamento relativo+absoluto
Se você quiser posicionar um div em relação a um elemento específico, pode usar uma combinação de position: relative e position: absolute.
Exemplo de posicionamento relativo+absoluto da tag HTML <div>:
Exemplo da tag HTML <div> com a propriedade position do CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.content {
position: relative;
height: 400px;
border: 1px solid #666;
}
.content div {
position: absolute;
width: 35%;
padding: 10px;
}
.blue {
right: 20px;
bottom: 0;
background-color: #1faadb;
}
.green {
top: 10px;
left: 15px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="blue">
<p>This is some paragraph inside div tag.</p>
</div>
<div class="green">
<p>This is some paragraph inside div tag.</p>
</div>
</div>
</body>
</html>position: relative não afeta o posicionamento dos elementos no fluxo normal, a menos que você adicione deslocamentos.
Atributos
A tag <div> não possui atributos próprios. Na prática, ela depende dos Atributos Globais — mais frequentemente id, class, style, data-* e aria-* — para ser estilizada, manipulada por scripts ou tornada acessível. Ela também suporta os Atributos de Evento.
| Atributo | Valor | Descrição |
|---|---|---|
| align | left right center justify | Descontinuado. Era usado para alinhar o conteúdo dentro de uma tag <div>. Não é suportado no HTML5 — use a propriedade text-align do CSS. |