Acerca de este problema HTML
Un <br> aislado ocurre cuando el elemento <br>, que es contenido de frase, se coloca en contextos que solo permiten hijos específicos. Los errores comunes incluyen poner <br> directamente dentro de <ul>, <ol>, <table>, <tr>, o fuera de <body>, e insertarlo entre hermanos de nivel de bloque para agregar espaciado en lugar de usar CSS. El validador marca esto porque viola el modelo de contenido HTML.
Esto importa para el cumplimiento de estándares, renderizado predecible y accesibilidad. Los lectores de pantalla y tecnologías asistivas dependen de la estructura correcta (listas hechas de li, tablas construidas desde tr/td, secciones dentro de body). Un <br> mal colocado puede producir órdenes de lectura confusos y diseño inconsistente entre navegadores.
Cómo solucionarlo:
-
Mantén
<br>solo donde se permita contenido de frase (típicamente dentro de elementos de flujo de texto comop,span,li,td,caption). -
Para espaciado entre bloques, usa márgenes CSS en lugar de
<br>. -
Para listas, usa elementos
liapropiados; para tablas, coloca texto dentro detd/th; para formularios, usa agrupación y CSS. -
Asegúrate de que ningún
<br>aparezca fuera de<body>o dentro de elementos que tengan modelos de contenido restringidos (ul,ol,table,tr,thead,tbody,tfoot,colgroup,select,dldirectamente, etc.). -
Si un salto de línea es puramente presentacional a través de viewports, considera CSS (
display:block,white-space) en lugar de<br>.
Ejemplos
Uso válido dentro de contenido de frase
<p>
Primera línea.<br>
Segunda línea.
</p>
Inválido: <br> directamente dentro de una lista (activa el error)
<ul>
<br>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>
Solución: eliminar el <br> aislado; usar solo elementos de lista
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>
Inválido: <br> fuera de <body> (activa el error)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Stray br Tag Example</title>
</head>
<br>
<body>
Contenido aquí.
</body>
</html>
Solución: mover <br> dentro del body (o usar CSS si solo se necesita espaciado)
<!DOCTYPE html>
<html lang="en">
<head>
<title>No Stray br Tag</title>
</head>
<body>
Contenido aquí.<br>
Nueva línea en body.
</body>
</html>
Inválido: <br> como hijo de <table> (activa el error)
<table>
<br>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>Solución: usar filas y celdas de tabla apropiadas; colocar texto dentro de celdas
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>Más A</td>
<td>Más B</td>
</tr>
</table>
Inválido: usar <br> para espaciado entre bloques (no permitido entre hermanos)
<div>Sección A</div>
<br>
<div>Sección B</div>Solución: usar márgenes CSS para espaciado
<!DOCTYPE html>
<html lang="en">
<head>
<title>Spacing with CSS</title>
<style>
.block { margin-bottom: 1rem; }
</style>
</head>
<body>
<div class="block">Sección A</div>
<div>Sección B</div>
</body>
</html>Alternativas válidas donde se necesita un salto en contexto de frase
<li>
Dirección: 123 Main St.<br>
Suite 400
</li>Consejos:
-
Usa exactamente
<br>(no se necesita etiqueta de cierre) y no auto-cierres como XML (<br />) a menos que tu herramienta lo requiera; ambos se analizan en HTML, pero mantente con el estilo HTML para consistencia. - Si ves múltiples errores “stray start tag ‘br’”, verifica los contenedores padre: arreglar el primer padre inválido a menudo resuelve muchos errores posteriores.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.
Más información: