Tag HTML <br>
A tag HTML <br> insere uma quebra de linha. Veja como usá-la, como estilizá-la com CSS e exemplos práticos.
A tag HTML <br> insere uma única quebra de linha. Esta página explica quando uma quebra de linha faz parte do conteúdo (e <br> é a ferramenta certa), quando na verdade é espaçamento ou layout (e CSS é a ferramenta certa), como leitores de tela a tratam e quais alternativas — como <pre> ou a propriedade CSS white-space — são adequadas para versos e texto pré-formatado.
Definição
A tag HTML <br> define uma quebra de linha. Ao contrário da tag <p>, que cria uma quebra de parágrafo, a tag <br> simplesmente move o texto seguinte para a próxima linha sem adicionar espaço vertical extra.
A regra principal: use <br> somente quando a quebra de linha é parte do próprio conteúdo — texto que é inerentemente estruturado em linhas, como um endereço postal, um poema ou letras de música. Se uma quebra inicia um novo pensamento, isso é um parágrafo, então use <p>. Se a quebra é sobre espaçamento ou layout visual, isso é uma tarefa de apresentação para CSS, não para <br>.
Sintaxe
A tag <br> é um elemento vazio em HTML5, o que significa que não requer uma tag de fechamento. Porém, em XHTML, ela deve ser auto-fechada (<br />).
Exemplo da tag HTML <br>:
exemplo da tag br
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example of the <br> tag usage.</h1>
<p> Inside the paragraph, we can put the tag <br />, <br /> to transfer a part of the text to another line if necessary.</p>
</body>
</html>Uso
Use <br> somente quando a quebra de linha pertence ao conteúdo. Os casos clássicos são endereços postais, poemas e letras de música, onde a estrutura de linhas carrega significado.
Exemplo: um endereço com <address> e <br>
Um endereço de rua é o uso exemplar de <br>: cada linha é genuinamente uma linha separada do mesmo bloco, não um parágrafo separado. O elemento <address> fornece a semântica de informação de contato, e <br> organiza as linhas.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<address>
Jane Doe<br />
123 Main Street<br />
Springfield, IL 62704<br />
USA
</address>
</body>
</html>Exemplo: poemas e letras de música
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example of the <br> tag usage</h1>
<blockquote>
But I'm not the only one<br />
I hope some day you'll join us<br />
And the world will live as one.<br />
</blockquote>
<cite>John Lennon "imagine"</cite>
</body>
</html>Quando não usar <br>
<br> é para estrutura de linhas, não para espaçamento ou layout. Dois usos indevidos comuns:
- Separar parágrafos. Uma quebra entre dois pensamentos distintos é um limite de parágrafo — envolva cada bloco em
<p>. - Criar espaços verticais. Empilhar várias tags
<br>para empurrar conteúdo para baixo é um truque de apresentação. O espaçamento pertence ao CSS, através da propriedademargin.
Não use <br> para separar parágrafos ou adicionar espaçamento. Use elementos <p> juntamente com a propriedade CSS margin para controlar o espaço vertical.
Acessibilidade: por que <br><br> empilhado é prejudicial
Leitores de tela anunciam cada <br> como uma quebra de linha. Quando você empilha vários para simular um espaço — por exemplo <br><br><br> — o leitor diz "quebra de linha, quebra de linha, quebra de linha", o que é ruído que não transmite nenhum significado e interrompe o fluxo de leitura. Pior ainda, as linhas vazias não têm relação semântica com o texto ao redor, portanto a tecnologia assistiva não consegue ajudar o usuário a entender a estrutura do documento.
A correção correta é expressar o espaço como espaçamento em CSS. Substitua isto:
<p>First paragraph.</p>
<br /><br /><br />
<p>Second paragraph.</p>por isto:
<style>
.gap-below {
margin-bottom: 3rem;
}
</style>
<p class="gap-below">First paragraph.</p>
<p>Second paragraph.</p>A versão CSS mantém os dois parágrafos como parágrafos adequados e deixa margin cuidar da distância visual, de modo que os leitores de tela não anunciam nada extra.
Alternativas para versos e texto pré-formatado
Quando um bloco inteiro é estruturado em linhas, controlar as quebras com CSS ou <pre> costuma ser mais limpo do que encher a marcação com tags <br>. Um guia rápido de decisão:
- Algumas quebras intencionais dentro de texto fluente (um endereço, uma linha isolada em um parágrafo): use
<br>. - Um bloco onde as quebras de linha no seu código-fonte são as quebras desejadas, mas o espaçamento deve ser comprimido (por exemplo, versos): defina
white-space: pre-lineno contêiner para que as novas linhas no HTML se tornem quebras de linha reais sem nenhum<br>. - Texto onde cada espaço e quebra de linha deve ser preservado exatamente (código, arte ASCII): use o elemento
<pre>, que renderiza o conteúdo em fonte monoespaçada e respeita todos os espaços em branco.
<style>
.poem {
white-space: pre-line;
}
</style>
<p class="poem">
Roses are red
Violets are blue
</p>Aqui as quebras de linha vêm do texto-fonte, e white-space: pre-line as transforma em quebras visíveis — nenhum <br> é necessário.
Atributos
A tag <br> aceitava anteriormente um atributo clear para controlar como a quebra interagia com elementos flutuantes. Esse atributo foi removido no HTML5 e não deve ser usado.
| Atributo | Valor | Status |
|---|---|---|
clear | all / left / right / none | Removido no HTML5 — não usar |
Para impedir que o conteúdo seja exibido ao lado de um elemento flutuante, use a propriedade CSS clear em vez disso:
.below-float {
clear: both;
}A tag <br> suporta os Atributos Globais e os Atributos de Evento.