HTML br: quebras de linha e diferenças entre p, wbr e pre

HTML <br> insere uma quebra de linha em um ponto específico dentro do texto. Use-o quando a divisão da linha em si for importante, como em poesia ou em um endereço postal. Separe parágrafos distintos com p e controle o espaçamento com CSS.

Sintaxe br e quebras de linha no código-fonte

br é um elemento vazio sem conteúdo ou tag de fechamento. Escreva <br> em HTML, sem </br>. O HTML também aceita <br />, mas a barra não é o que faz a quebra de linha ocorrer.

Com estilos padrão comuns, quebras de linha e espaços consecutivos no código-fonte são colapsados. Um br especifica uma quebra dentro do conteúdo independentemente da formatação do fonte. Isso também é diferente do ajuste de texto que ocorre naturalmente quando a tela se torna mais estreita.

Exemplo completo: compare quebras de linha no código-fonte, br e parágrafos

Salve o seguinte documento como line-breaks.html e abra-o em um navegador. Ele apresenta o mesmo texto curto com estruturas diferentes para que você possa comparar os resultados.

<!doctype html>
<html lang="pt">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparar quebras de linha e parágrafos</title>
  <style>
    body { max-width: 36rem; padding: 0 1rem; margin: 1rem auto; }
    .message { margin: 0; line-height: 1.6; }
    .message + .message { margin-top: 1rem; }
  </style>
</head>
<body>
  <h1>Comparação de quebras de linha</h1>
  <h2>Quebra apenas no código-fonte</h2>
  <p id="source-only">Primeira linha
    Segunda linha</p>
  <h2>Quebra de linha com br</h2>
  <p id="with-br">Primeira linha<br>Segunda linha</p>
  <h2>Parágrafos distintos</h2>
  <p class="message">Um parágrafo sobre o primeiro tema.</p>
  <p class="message">Um parágrafo sobre o segundo tema.</p>
</body>
</html>

A primeira seção é exibida de forma contínua como Primeira linha Segunda linha; a segunda quebra após br. As duas últimas frases são parágrafos separados com um espaçamento CSS de 1rem. Uma janela muito estreita também pode fazer a primeira seção quebrar, mas isso não é uma quebra especificada por br.

Escolha entre br, p, wbr e pre

Inserir br após cada frase para forçar um comprimento visualmente agradável pode produzir uma quebra estranha em telas pequenas ou com texto grande. Deixe a prosa normal se ajustar naturalmente. Se precisar preservar espaços e divisões de linha elaborados, veja o guia pré-guia de HTML pre sobre espaços e quebras de linha.

Use CSS para espaço em branco e espaçamento de parágrafos

Elementos br repetidos usados para criar espaço vazio podem unir parágrafos semanticamente distintos em um só e dificultar a navegação por parágrafos para leitores de tela. Use p para um novo parágrafo e margin para espaçamento. Controle a altura da linha dentro de um parágrafo com line-height.

Não use o atributo obsoleto clear ou margens no próprio br como ferramentas de layout. Gerencie divisões de linha significativas separadamente do layout visual, para que o texto continue legível em diferentes larguras de tela e tamanhos de fonte. A referência referência de br na MDN explica a sintaxe e acessibilidade.