Docs executáveis de HTML: Tag div

Q: Como colocar duas divs lado a lado?

Envolva as duas numa div pai e dê ao pai display: flex. Os filhos então ficam em linha. Adicione gap para o espaço entre eles e flex: 1 nos filhos para dividir a largura por igual.

Q: Devo usar div ou section?

Use , , , , ou quando o conteúdo tem esse papel, porque leitores de tela e buscadores entendem essas tags. Use quando você só precisa de uma caixa para estilo ou layout.

O que a tag div faz

<div> (abreviação de division, divisão) é um contêiner genérico. Ela agrupa elementos para que você possa estilizá-los, posicioná-los ou manipulá-los com script como uma unidade. Sozinha, ela não tem aparência nenhuma: sem margem, sem borda, sem fonte especial. É um elemento block, então começa numa linha nova e se estende pela largura disponível.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    div { border: 2px dashed #2563eb; padding: 8px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <div>
    <h2>A group</h2>
    <p>The dashed border shows the div around the heading and this paragraph.</p>
  </div>
  <div>A second div starts on a new line.</div>
</body>
</html>

Remova a linha border do estilo e as divs ficam invisíveis: essa é a aparência padrão de uma div. Tudo o que ela faz visualmente vem do CSS.

div class e id

Uma div normalmente recebe uma class, que é o nome que o seu CSS mira. Divs que compartilham uma classe compartilham o estilo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div class</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; background: #f3f4f6; }
    .card { background: white; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; margin-bottom: 12px; }
    .card h3 { margin: 0 0 4px; }
    .card.highlight { border-color: #2563eb; box-shadow: 0 0 0 3px #bfdbfe; }
  </style>
</head>
<body>
  <div class="card">
    <h3>Basic</h3>
    <p>class="card"</p>
  </div>
  <div class="card highlight" id="pro">
    <h3>Pro</h3>
    <p>class="card highlight" and id="pro"</p>
  </div>
</body>
</html>

.card estiliza as duas caixas, .card.highlight adiciona um contorno azul à div que tem as duas classes. Use id quando precisar apontar para uma div específica, por exemplo como destino de um link (href="#pro"). A página de atributos compara class e id em detalhe.

Divs lado a lado

Como divs são blocks, elas se empilham na vertical. Para colocá-las em linha, transforme o pai delas num contêiner flex:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Divs side by side</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .row { display: flex; gap: 12px; }
    .col { flex: 1; padding: 12px; border-radius: 8px; background: #e5e7eb; }
    .col.wide { flex: 2; background: #dbeafe; }
  </style>
</head>
<body>
  <div class="row">
    <div class="col">One</div>
    <div class="col wide">Two (twice as wide)</div>
    <div class="col">Three</div>
  </div>
</body>
</html>

display: flex em .row alinha os filhos, gap os espaça e os valores de flex dividem a largura (1 : 2 : 1 aqui). Esse padrão de pai e filhos é o uso mais comum de divs em sites reais. Para centralizar uma div, veja como centralizar uma div.

Divs aninhadas

Divs podem conter outras divs em qualquer profundidade. Cada nível é uma caixa dentro de outra caixa, o que você vê dando a cada div uma borda e um pouco de padding:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested divs</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div { border: 2px solid #2563eb; padding: 10px; }
    .page { background: #eff6ff; }
    .sidebar { background: #fef3c7; border-color: #f59e0b; }
    .content { background: white; margin-top: 8px; }
  </style>
</head>
<body>
  <div class="page">
    .page
    <div class="sidebar">.sidebar</div>
    <div class="content">
      .content
      <div>an inner div</div>
    </div>
  </div>
</body>
</html>

Mantenha o aninhamento tão raso quanto o layout permitir. Cada wrapper a mais é mais uma caixa para entender quando uma margem ou largura não faz o que você espera.

div ou uma tag semântica?

Uma div não diz nada sobre o seu conteúdo. O HTML tem tags que fazem o mesmo trabalho de agrupar e também dizem o que é o grupo:

Em vez de	Use	Para
`<div class="header">`	`<header>`	Introdução ou barra superior de uma página ou seção
`<div class="nav">`	`<nav>`	Um bloco de links de navegação
`<div class="main">`	`<main>`	O conteúdo principal, uma vez por página
`<div class="post">`	`<article>`	Um item independente: post, comentário, card de produto
`<div class="footer">`	`<footer>`	Rodapé de uma página ou seção

Essas tags têm exatamente a aparência de uma div até você estilizá-las, mas os leitores de tela as anunciam e permitem que o usuário pule entre elas, e os buscadores leem a estrutura. Use uma div para caixas que existem só para layout ou estilo, como o wrapper .row acima. A página de HTML semântico cobre o conjunto completo.

Uma div não é um botão

Uma div com um manipulador de clique parece clicável para quem usa mouse, mas quem usa teclado não chega nela com Tab nem a aciona com Enter, e o leitor de tela não a anuncia como botão:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs button</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .fake, button { display: inline-block; padding: 8px 14px; border-radius: 6px; border: 0; background: #2563eb; color: white; font: inherit; cursor: pointer; margin: 4px; }
  </style>
</head>
<body>
  <div class="fake" onclick="document.getElementById('out').textContent = 'div clicked'">div</div>
  <button onclick="document.getElementById('out').textContent = 'button clicked'">button</button>
  <p id="out">Click the preview, then press Tab: only the button gets focus.</p>
</body>
</html>

Use <button> para ações e <a href> para navegação. Os dois recebem foco e funcionam com o teclado sem esforço extra.

Erros comuns

Uma div dentro de um <p>. O parágrafo fecha antes da div. Faça da div o elemento externo, ou use <span> dentro do parágrafo.
Sopa de divs. Uma página feita só de divs não tem estrutura para leitores de tela. Troque divs por <header>, <nav>, <main> e <footer> onde couber.
Divs clicáveis. Use um <button> ou um link.
Esperar que uma div tenha a largura do texto. Uma div ocupa a largura toda. Use display: inline-block, width: fit-content ou um <span> se quiser que ela encolha.
Repetir um id em várias divs. Use uma classe para tudo o que se repete.

Perguntas frequentes

O que é uma div no HTML?

<div> é um contêiner genérico. Ela agrupa outros elementos para que você possa estilizá-los ou posicioná-los juntos, e não tem significado próprio: os navegadores a exibem como um bloco que começa numa linha nova e ocupa toda a largura disponível.

O que significa div class?

<div class="card"> é uma div com um atributo class. A classe é um nome que o CSS usa para estilizá-la (.card { ... }) e que o JavaScript usa para encontrá-la. Várias divs podem compartilhar uma classe, e uma div pode ter várias: class="card featured".

Como colocar duas divs lado a lado?

Envolva as duas numa div pai e dê ao pai display: flex. Os filhos então ficam em linha. Adicione gap para o espaço entre eles e flex: 1 nos filhos para dividir a largura por igual.

Devo usar div ou section?

Use <section>, <header>, <nav>, <main>, <article> ou <footer> quando o conteúdo tem esse papel, porque leitores de tela e buscadores entendem essas tags. Use <div> quando você só precisa de uma caixa para estilo ou layout.

Posso colocar uma div dentro de uma tag p?

Não. Um parágrafo só pode conter conteúdo inline. O navegador fecha o <p> assim que encontra a <div>, o que quebra seus estilos. Use uma div como elemento externo ou um <span> dentro do parágrafo.

Conceitos relacionados