↩️ Quebra de Linha em HTML

Introdução

Em HTML, algumas situações exigem que o conteúdo continue em uma nova linha sem criar um novo parágrafo.

Para isso utilizamos o elemento <br>, conhecido como quebra de linha.

📌 A tag <br> força uma mudança de linha dentro do mesmo elemento.

O que é a tag <br>?

A tag <br> significa "break line" ou quebra de linha.

Ela não possui fechamento, sendo um elemento vazio.



<br>



Exemplo Simples



<p>

Olá!

<br>

Seja bem-vindo ao curso.

</p>



Olá!
Seja bem-vindo ao curso.

Diferença entre <br> e <p>

Elemento Função
<p> Cria um novo parágrafo com espaçamento.
<br> Apenas muda a linha do texto.

Uso em Endereços

Um dos usos mais comuns da quebra de linha é organizar endereços.



<p>

Rua das Flores, 100

<br>

São Paulo - SP

<br>

Brasil

</p>



Rua das Flores, 100
São Paulo - SP
Brasil

Uso em Poemas e Letras de Texto

Textos onde a quebra visual faz parte da estrutura podem utilizar <br>.



<p>

Primeira linha

<br>

Segunda linha

<br>

Terceira linha

</p>



Primeira linha
Segunda linha
Terceira linha

Uso em Contatos



<p>

Email: contato@empresa.com

<br>

Telefone: (12) 99999-9999

</p>



Email: contato@empresa.com
Telefone: (12) 99999-9999

Uso Incorreto do <br>

Muitos iniciantes utilizam vários <br> para criar espaços grandes na página.



<br>

<br>

<br>

Espaço criado manualmente



⚠️ Espaçamentos devem ser feitos utilizando CSS com propriedades como margin e padding.

Exemplo utilizando CSS



p {

  margin-bottom: 20px;

}



O CSS controla o visual enquanto o HTML mantém a estrutura correta.

Diferença Visual

Forma Resultado
Vários <br> Espaçamento manual e difícil manutenção.
CSS Layout organizado e profissional.

Boas Práticas

Resumo da Aula

Tag Descrição
<br> Quebra uma linha.
<p> Cria um novo parágrafo.
🎓 Aula concluída! Agora você sabe utilizar corretamente a quebra de linha em HTML5.