Carregando...

Div em HTML

Depois de block/inline, a caixa div serve para agrupar.

Porque uma caixa «sem significado» ajuda

Cartões começam muitas vezes como div com class.

Resposta direta

Envolva marcação relacionada num div, adicione class, prefira semântica quando o papel é claro.

Um grupo cartão

div à volta de título e parágrafo.

Grouping with a card div

html

HTML Code

<div class="card">
<h2>Today</h2>
<p>Practice HTML containers with a simple card.</p>
</div>

Leitura do cartão

div agrupa
h2/p mantêm significado
class = gancho

Wrapper com dois cartões

Wrapper exterior e interiores.

Wrapper with two cards

html

HTML Code

<div class="card-row">
<div class="card">
<h3>Lesson</h3>
<p>Read the notes once.</p>
</div>
<div class="card">
<h3>Practice</h3>
<p>Rebuild the markup from memory.</p>
</div>
</div>

Leitura do wrapper

dois níveis bastam
filhos semânticos

Prefira significado

div é recurso, não primeira escolha sempre.

Prática

Um cartão
Dois no wrapper
Apague divs vazios
Liste três tags que div não substitui

Erros fáceis

sopa de div
div em vez de p/ul/nav
wrappers vazios

Resumo

contentor genérico
class como gancho
semântica se clara
evite a sopa

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓

Perguntas

🎯

70%

Para Passar

♾️

∞

Tempo

🔄

∞

Tentativas

📝 Instruções

Leia cada pergunta cuidadosamente
Selecione a melhor resposta para cada pergunta
Você pode refazer o quiz quantas vezes quiser
Seu progresso será mostrado no topo

Idioma