Parágrafos HTML

Você já usa títulos para cabeçalhos e seções. A maior parte do texto legível do corpo de uma página pertence a parágrafos. Esta lição foca no elemento p — como escrevê-lo, como o navegador o exibe e como difere das linhas em branco no editor.

O que é um parágrafo HTML?

Um parágrafo HTML é um bloco de texto marcado com o elemento p. Você abre com <p>, escreve o texto e fecha com </p>. Parágrafos são para frases comuns e blocos curtos de conteúdo do corpo, não para títulos de página (esses usam headings).

Resposta direta

Envolva cada bloco de texto do corpo nas suas próprias tags p. O navegador trata cada p como um parágrafo e costuma adicionar espaço antes e depois. Pressionar Enter várias vezes no arquivo HTML não cria o mesmo espaçamento — o navegador colapsa espaços em branco extras na fonte a menos que você use os elementos certos.

Ler o exemplo

• O primeiro <p>…</p> é um parágrafo
• O segundo <p>…</p> é outro parágrafo
• O navegador os mostra como blocos separados, geralmente com espaço entre eles
• O texto entre as tags é o conteúdo que os leitores veem

Espaço em branco na fonte não é layout

No editor, você pode pressionar Enter para facilitar a leitura do arquivo HTML. Isso não significa que o navegador mostre essas linhas em branco como grandes vazios. Para quebras reais de parágrafo, use elementos p separados. Para uma quebra de linha dentro da mesma ideia — como um endereço curto ou verso — você pode usar <br> (visto brevemente com elementos).

Prefira parágrafos a truques de espaço vazio

Não empilhe tags vazias <p></p> só para empurrar o conteúdo para baixo. Não coloque um artigo inteiro num parágrafo gigante se forem várias ideias. Divida as ideias em blocos p claros. Depois, o CSS controlará espaçamento e fontes; o HTML deve marcar a estrutura real do texto.

Experimente você mesmo

1. Abra o seu esqueleto HTML básico
2. Adicione um h1 e dois parágrafos curtos abaixo
3. Adicione um terceiro parágrafo que use <br> para um endereço curto multilinha
4. Guarde e abra a página no navegador
5. Compare o que vê com as linhas em branco do arquivo-fonte

Erros comuns

• Confiar em linhas em branco na fonte em vez de tags p separadas
• Usar headings quando só precisa de frases normais do corpo
• Criar parágrafos vazios só para adicionar espaço vertical
• Esquecer o </p> de fecho num parágrafo longo
• Meter uma página inteira de ideias sem relação num único p

Resumo

• O texto do corpo costuma pertencer ao elemento p
• Cada parágrafo deve ser o seu próprio bloco <p>…</p>
• Os navegadores tipicamente adicionam espaço entre parágrafos
• Enter extra na fonte não equivale ao espaçamento real de layout
• Use <br> para uma quebra de linha dentro de um parágrafo quando necessário
• Mantenha a estrutura no HTML; refine o espaçamento depois com CSS