Sobre este problema HTML
Um <br> isolado acontece quando o elemento <br>, que é conteúdo de texto, é colocado em contextos que só permitem filhos específicos. Erros comuns incluem colocar <br> diretamente dentro de <ul>, <ol>, <table>, <tr>, ou fora de <body>, e inseri-lo entre irmãos de nível de bloco para adicionar espaçamento em vez de usar CSS. O validador sinaliza isso porque viola o modelo de conteúdo HTML.
Isso importa para conformidade com padrões, renderização previsível e acessibilidade. Leitores de tela e tecnologia assistiva dependem de estrutura correta (listas feitas de li, tabelas construídas de tr/td, secções dentro de body). <br> mal posicionado pode produzir ordens de leitura confusas e layout inconsistente entre navegadores.
Como corrigir:
-
Mantenha
<br>apenas onde conteúdo de texto é permitido (tipicamente dentro de elementos de fluxo de texto comop,span,li,td,caption). -
Para espaçamento entre blocos, use margens CSS em vez de
<br>. -
Para listas, use itens
liapropriados; para tabelas, coloque texto dentro detd/th; para formulários, use agrupamento e CSS. -
Certifique-se de que nenhum
<br>aparece fora de<body>ou dentro de elementos que têm modelos de conteúdo restritos (ul,ol,table,tr,thead,tbody,tfoot,colgroup,select,dldiretamente, etc.). -
Se uma quebra de linha é puramente apresentacional entre viewports, considere CSS (
display:block,white-space) em vez de<br>.
Exemplos
Uso válido dentro de conteúdo de texto
<p>
Primeira linha.<br>
Segunda linha.
</p>
Inválido: <br> diretamente dentro de uma lista (gera o erro)
<ul>
<br>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Correção: remova o <br> isolado; use apenas itens de lista
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Inválido: <br> fora de <body> (gera o erro)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Stray br Tag Example</title>
</head>
<br>
<body>
Content here.
</body>
</html>
Correção: mova <br> para dentro do body (ou use CSS se apenas espaçamento for necessário)
<!DOCTYPE html>
<html lang="en">
<head>
<title>No Stray br Tag</title>
</head>
<body>
Content here.<br>
New line in body.
</body>
</html>
Inválido: <br> como filho de <table> (gera o erro)
<table>
<br>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>Correção: use linhas e células de tabela apropriadas; coloque texto dentro de células
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>More A</td>
<td>More B</td>
</tr>
</table>
Inválido: usar <br> para espaçamento entre blocos (não permitido entre irmãos)
<div>Section A</div>
<br>
<div>Section B</div>Correção: use margens CSS para espaçamento
<!DOCTYPE html>
<html lang="en">
<head>
<title>Spacing with CSS</title>
<style>
.block { margin-bottom: 1rem; }
</style>
</head>
<body>
<div class="block">Section A</div>
<div>Section B</div>
</body>
</html>Alternativas válidas onde uma quebra é necessária em contexto de texto
<li>
Address: 123 Main St.<br>
Suite 400
</li>Dicas:
-
Use exatamente
<br>(não é necessária tag de fechamento) e não feche automaticamente como XML (<br />) a menos que suas ferramentas o exijam; ambos funcionam em HTML, mas mantenha o estilo HTML para consistência. - Se você ver vários erros “tag de início isolado ‘br’”, verifique contêineres pais: corrigir o primeiro pai inválido frequentemente resolve muitos erros subsequentes.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.