1. O Elemento de Parágrafo (<p>)

O elemento <p> é utilizado para representar parágrafos de texto. Ele é um elemento de nível de bloco (block-level), o que significa duas coisas fundamentais:

• Ele sempre começa em uma nova linha no navegador.
• Os navegadores aplicam automaticamente uma margem vertical padrão (espaçamento antes e depois do bloco) para separá-lo visualmente de outros parágrafos e títulos.

<p>Este é o primeiro parágrafo do meu artigo.</p>
<p>Este é o segundo parágrafo. Note como o navegador cria um espaçamento natural entre eles.</p>

2. O Choque do Iniciante: Colapso de Espaços em Branco

Quem está começando no HTML costuma se surpreender ao tentar pressionar a barra de espaço 10 vezes ou apertar a tecla Enter várias vezes dentro do código para criar espaçamento.

Por padrão, os navegadores implementam o comportamento de Whitespace Collapsing (Colapso de Espaços):

<!-- No seu código-fonte: -->
<p>
   Olá,        mundo!
   Estou     pulando       linhas.
</p>
 
<!-- O que o navegador realmente exibe na tela: -->
<p>Olá, mundo! Estou pulando linhas.</p>

3. A Tag de Quebra de Linha (<br>)

A tag <br> (de Break Line) é um elemento vazio (void element) que força o texto a descer para a linha seguinte imediatamente, sem criar o espaçamento largo de um novo parágrafo.

Quando USAR o <br>:

• Endereços postais e dados de localização:
  HTML5 5 linhas

  ⇄ Wrap 📋 Copiar Código

  <p>
    Av. Paulista, 1000 - Bela Vista<br>
    São Paulo - SP<br>
    CEP 01310-100
  </p>
  

  <p> Av. Paulista, 1000 - Bela Vista<br> São Paulo - SP<br> CEP 01310-100 </p>
• Estrofes de poesias ou letras de músicas.

4. A Linha Divisória Temática (<hr>)

A tag <hr> (antigamente chamada de Horizontal Rule) representa no HTML5 uma quebra temática entre parágrafos ou seções de uma história.

Ela desenha uma linha horizontal suave que indica ao leitor uma mudança de assunto ou de cena:

<p>O sol se pôs no horizonte e os aventureiros montaram o acampamento para a noite.</p>
 
<hr>
 
<p>Na manhã seguinte, um ruído inesperado na floresta despertou a todos.</p>

5. Quando Você Precisa de Espaços Exatos: O Elemento <pre>

E se você realmente precisar exibir um trecho de texto exatamente como foi digitado, preservando cada espaço, tabulação e linha pulada?

Para isso existe o elemento <pre> (Texto Pré-Formatado). Dentro dele, o navegador desativa o colapso de espaços e renderiza tudo em uma fonte monoespaçada (onde cada letra tem a mesma largura):

<pre>
Item          Quantidade       Preço
Camiseta      2                R$ 80,00
Tênis         1                R$ 250,00
</pre>

6. Exemplo Prático Integrado

Observe a interação harmoniosa entre parágrafos, quebras pontuais com <br> e a divisão temática com <hr>:

<article>
  <h2>Atendimento ao Aluno Web Academy</h2>
  <p>
    Nossa equipe pedagógica está disponível de segunda a sexta-feira.<br>
    Horário de suporte: 09h00 às 18h00 (Horário de Brasília).
  </p>
 
  <hr>
 
  <h3>Sede Operacional</h3>
  <p>
    Web-ZoneWare Digital Studio<br>
    São Paulo, Brasil
  </p>
</article>

7. Tabela Comparativa de Tags de Fluxo de Texto

8. Ferramentas Web-ZoneWare para Textos e Códigos

Acelere sua produtividade com as ferramentas do ecossistema:

• Limpador e Formatador HTML: Elimina tags <br> redundantes e padroniza a indentação dos seus parágrafos.
• Minificador de HTML Online: Remove quebras de linha e espaços excedentes para máxima velocidade no Google PageSpeed.
• Playground Web IDE: Pratique a estruturação de textos e veja a renderização instantânea no navegador.

9. Links Oficiais de Autoridade

• MDN Web Docs — O Elemento de Parágrafo (<p>): A documentação oficial de referência da Mozilla.
• WHATWG Living Standard — The <br> Element: A especificação técnica estrita sobre quebras de linha.
• W3C HTML5 Specification — The <hr> Thematic Break: O papel semântico do divisor temático.

10. Exercício Prático da Lição 07

1. Abra o Playground Web IDE.
2. Crie dois parágrafos utilizando a tag <p>. No primeiro parágrafo, digite 10 espaços entre duas palavras e confira como o navegador colapsa tudo para um único espaço.
3. Crie um bloco de endereço completo (Rua, Número, Bairro, Cidade e CEP) utilizando quebras de linha com <br>.
4. Insira uma linha divisória temática (<hr>) logo abaixo do endereço.
5. Crie um bloco pré-formatado com <pre> desenhando um pequeno gráfico ou tabela alinhada apenas com espaços e veja como eles são mantidos rigorosamente intactos.

O post Parágrafos e Quebras de Linha no HTML: Guia | Web Academy apareceu primeiro em Web-Zoneware.