HTML BR: quebra de linha no HTML

Nesta documentação de HTML falaremos sobre a tag br e como ela é utilizada para adicionar quebras de linha dentro do HTML. Além disso, veremos algumas situações em que não devemos utilizá-la.

<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>
Código 1. Exemplo de uso do <br>.

<br>: na prática

Veja na Figura 1 como o poema foi formatado no texto original.

Figura 1. Poema formatado

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>
Código 2. Uso incorreto de <br> para separar parágrafos de texto

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>
Código 3. Separando parágrafos corretamente

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>
Código 4. Uso incorreto de <br> para aumentar o espaçamento entre linhas de texto

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>
Código 5. Utilizando a propriedade line-height para aumentar o espaçamento entre linhas

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.

Artigos relacionados