<br>
Utilizamos a tag <br> para adicionar quebras de linha em um texto HTML.
O uso da tag <br> é indicado apenas para casos em que queremos adicionar uma quebra específica em um texto, como em um poema apresentado no Código 1.
<h1>Eu amo tudo que foi</h1>
<h2>Fernando Pessoa</h2>
<p>
Eu amo tudo o que foi
<br>
Tudo o que já não é
<br>
A dor que já me não dói
<br>
A antiga e errônea fé
<br>
O ontem que a dor deixou,
<br>
O que deixou alegria
<br>
Só porque foi, e voou
<br>
E hoje é já outro dia.
</p>
<br>: na prática
Veja na Figura 1 como o poema foi formatado no texto original.
Agora veja como o poema foi formatado no HTML através da tag <br>:
See the Pen Poema BR by Eduardo Soares (@eduscxbox) on CodePen.
Note que o poema é exibido da mesma forma que na Figura 1.
Utilizamos a tag <br> para criar uma quebra de linha.
<br>: quando não utilizar
A tag <br> não deve ser utilizada para aumentar o espaço entre linhas ou entre parágrafos, pois para isso existe a propriedade line-height do CSS e a tag <p> do HTML.
Veja alguns exemplos de uso incorreto da tag <br>.
<div>
Este é o primeiro parágrafo de um texto.
<br>
<br>
Este é o segundo parágrafo de um texto
</div>
Veja que no Código 2 a tag <div> possui dois textos que funcionam como parágrafos, e esses parágrafos são separados por duas tags <br>.
Isso é incorreto, pois a tag <br> não está sendo utilizada para criar uma quebra de linha, e sim para separar dois parágrafos. Em casos como esse, o correto é utilizar a tag <p>, como mostra o Código 3.
<div>
<p>Este é o primeiro parágrafo de um texto.</p>
<p>Este é o segundo parágrafo de um texto</p>
</div>
Outro uso incorreto para o <br> é a sua utilização para aumentar o espaçamento do texto entre uma linha e outra, veja no Código 4.
<style>
div {
width: 250px;
}
</style>
<div>
<p>Este é um texto longo dividido em <br><br>múltiplas linhas, porém, as linhas<br><br> estão muito juntas, então eu vou usar a tag <br> para aumentar o espaço entre<br><br> linhas.</p>
</div>
Veja que nessa situação a tag <br> foi utilizada para aumentar o espaço entre as linhas do texto.
Isso está incorreto, pois aqui a quebra de linha não foi utilizada para formatar o texto, e sim para adicionar um espaço entre as linhas. O correto nessa situação seria utilizar a propriedade line-height do CSS, veja no Código 5.
<style>
div {
width: 250px;
line-height: 35px;
}
</style>
<div>
<p>Este é um texto longo dividido em múltiplas linhas, porém, as linhas estão muito juntas, então eu vou usar a propriedade line-height do CSS para aumentar o espaço entre linhas.</p>
</div>
Para aumentar o espaçamento entre linhas de texto deve sempre ser utilizada a propriedade line-height. Utilizamos a tag <br> apenas para formatar textos com quebras de linha.
<br>: finalizando
A tag <br> possui poucas situações em que precisa ser utilizada, pois com as tecnologias atuais muitos recursos foram surgindo e substituindo a necessidade da tag <br>.
Porém, quando utilizada corretamente, a tag <br> é uma boa ferramenta de formatação de texto, permitindo a exibição correta de textos artísticos como poemas ou poesias, ou mesmo textos técnicos que precisam de quebras de linha em momentos específicos.
