HTML br: saltos de línea y diferencias con p, wbr y pre
HTML <br> inserta un salto de línea en un punto específico dentro del texto. Úsalo cuando la división de la línea misma sea importante, como en poesía o una dirección postal. Separa párrafos distintos con p y controla el espaciado con CSS.
Sintaxis de br y saltos de línea en el código fuente
br es un elemento vacío sin contenido ni etiqueta de cierre. Escribe <br> en HTML, sin </br>. HTML también acepta <br />, pero la barra no es lo que provoca el salto de línea.
Con estilos predeterminados ordinarios, los saltos de línea y los espacios consecutivos en el código fuente se colapsan. Un br especifica un salto dentro del contenido independientemente del formato del código fuente. Esto también es diferente del ajuste de texto que ocurre naturalmente al reducir el ancho de la pantalla.
Ejemplo completo: compara los saltos de línea del código fuente, br y los párrafos
Guarda el siguiente documento como line-breaks.html y ábrelo en un navegador. Presenta el mismo texto corto con diferentes estructuras para que puedas comparar los resultados.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Comparar saltos de línea y párrafos</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>Comparación de saltos de línea</h1>
<h2>Salto solo en el código fuente</h2>
<p id="source-only">Primera línea
Segunda línea</p>
<h2>Salto de línea con br</h2>
<p id="with-br">Primera línea<br>Segunda línea</p>
<h2>Párrafos distintos</h2>
<p class="message">Un párrafo sobre el primer tema.</p>
<p class="message">Un párrafo sobre el segundo tema.</p>
</body>
</html>La primera sección se une como Primera línea Segunda línea; la segunda se rompe después de br. Las dos últimas oraciones son párrafos separados con un espacio CSS de 1rem. Una ventana muy estrecha también puede hacer que la primera sección se ajuste, pero eso no es un salto especificado por br.
Elige entre br, p, wbr y pre
| Elemento | Rol y cuándo usarlo |
|---|---|
br |
Úsalo cuando una división de línea requerida dentro de la misma sección de texto forme parte del contenido. |
p |
Úsalo para separar párrafos distintos. Controla su espaciado con CSS. |
wbr |
Sugiere un punto de interrupción opcional en una cadena larga. No fuerza un salto de línea. |
pre |
Muestra texto que preserva la sangría y los saltos de línea de la fuente. |
Insertar br después de cada oración para forzar una longitud visualmente agradable puede producir un ajuste incómodo en pantallas pequeñas o con texto grande. Deja que la prosa común se ajuste de forma natural. Si necesitas preservar espacios y divisiones de línea creados por el autor, consulta la guía previa guía de HTML pre sobre espacios y saltos de línea.
Usa CSS para espacio en blanco y espaciado de párrafos
El uso repetido de elementos br para crear espacios vacíos puede fusionar párrafos semánticamente distintos en uno solo y dificultar la navegación por párrafos con lectores de pantalla. Utiliza p para un nuevo párrafo y margin para el espaciado. Controla la altura de línea dentro de un párrafo con line-height.
No uses el atributo obsoleto clear ni los márgenes en br como herramientas de diseño. Gestiona las divisiones de línea significativas por separado del diseño visual para que el texto siga siendo legible en diferentes anchos de pantalla y tamaños de fuente. La referencia referencia de br en MDN explica la sintaxis y la accesibilidad.
