Artigos HTML e CSS HTML BR: quebra de linha no HTML

<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.

Poema formatado
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.