Salto de línea en HTML: br, wbr y cuándo NO usar br

Abres el HTML de una web que has heredado y ahí está: párrafos separados con <br><br>. Dos saltos de línea haciendo el trabajo de dos etiquetas <p>. Funciona, el texto se ve separado, y por eso nadie lo toca. Pero un salto de línea en HTML no es lo mismo que un párrafo, y confundirlos rompe la semántica del documento, ensucia lo que oye un lector de pantalla y te complica el CSS. La pregunta interesante no es cómo se hace un salto de línea en HTML: es cuándo NO debes hacerlo con <br>. Ahí es donde casi todos los tutoriales se quedan cortos, y donde se distingue a quien entiende el marcado de quien lo copia.

La respuesta rápida: cómo se hace un salto de línea en HTML

Un salto de línea forzado se escribe con la etiqueta <br>:

<p>Primera línea.<br>Segunda línea, justo debajo.</p>

<br> es un elemento vacío (o void element): no encierra contenido, así que no lleva etiqueta de cierre. Escribes <br> y ya está. No existe </br>, y una hipotética <br></br> no significa nada. Verás por ahí <br /> con la barra: es sintaxis heredada de XHTML, válida en HTML5 pero innecesaria. El parser trata <br> y <br /> exactamente igual. Escribe <br> y olvídate de la barra.

Eso resuelve el "cómo". El resto del artículo es el "cuándo", que es lo que de verdad importa. Porque <br> mete una línea nueva dentro del mismo bloque de texto, y usarlo para lo que no es su cometido es el origen de la mayoría de HTML mal escrito que me encuentro.

La regla que lo ordena todo: <br> es contenido, no presentación

Interioriza esto y no volverás a dudar: <br> sirve cuando el salto forma parte del contenido, no cuando solo quieres separar cosas visualmente.

Hay textos en los que la división en líneas significa algo. Un poema pierde el sentido si sus versos se juntan en un párrafo corrido. Una dirección postal se lee por líneas. La letra de una canción tiene versos. En esos casos el salto no es decoración: es información. Ahí <br> es la etiqueta correcta, y la propia documentación de MDN lo dice: es útil para escribir un poema o una dirección, donde la división de las líneas es significante.

En cambio, cuando quieres "que haya más espacio", "que el siguiente bloque baje" o "que estos dos textos sean cosas distintas", eso no es contenido: es presentación y estructura. Y eso no se hace con <br>. Se hace con etiquetas de bloque (<p>, <ul>, <section>) y con CSS (margin, line-height).

La prueba del algodón: si borrases todo el CSS de la página, ¿el salto seguiría teniendo sentido leído en voz alta? Si sí, es contenido: <br>. Si solo servía para "que se viera bonito", es presentación: fuera.

Cuándo SÍ debes usar <br>: versos, direcciones, letras

Un poema, con el salto como parte del texto:

<blockquote>
  <p>
    Verde que te quiero verde.<br>
    Verde viento. Verdes ramas.<br>
    El barco sobre la mar<br>
    y el caballo en la montaña.
  </p>
</blockquote>

Cada verso va en su línea porque así se escribió el poema. Juntarlos sería alterar el contenido.

Una dirección postal, dentro del elemento semántico que le corresponde:

<address>
  Joan Medina<br>
  Calle Mayor, 12 - 3.º B<br>
  28013 Madrid
</address>

El nombre, la calle y la ciudad son tres líneas de una misma dirección: un solo bloque de contenido con saltos internos con significado. Este es el caso de manual de <br>, y es prácticamente el único que aparece a diario en una web normal.

El error que delata al principiante: separar párrafos con <br><br>

Este es el patrón que hay que erradicar:

<!-- MAL: dos ideas distintas metidas en un solo párrafo -->
<p>
  Ofrezco desarrollo a medida con Laravel, Node y Python.<br><br>
  También automatizo procesos internos con IA.
</p>

Visualmente parecen dos párrafos. Para el navegador es un solo párrafo con dos saltos dentro. Y eso tiene consecuencias que no ves hasta que molestan:

• Semántica rota. El documento afirma que esas dos ideas son el mismo párrafo. No lo son. Cualquier herramienta que lea la estructura, un lector de pantalla, un scraper, el modo lectura del navegador, un motor de búsqueda, recibe información falsa.
• CSS que pelea contigo. No puedes dar margin, sangría ni un estilo distinto al "segundo párrafo", porque no existe: es texto suelto dentro del primero. Acabas metiendo más <br> para ajustar el espacio, y el espacio nunca queda fino porque un salto de línea mide lo que mide la línea, no lo que tú quieras.
• El espacio no es configurable. Dos <br> seguidos dan el hueco que dan. ¿Quieres un pelín más? ¿Un pelín menos? No hay perilla. Con margin la hay, en las unidades que decidas.

La misma documentación de MDN lo advierte sin rodeos: no utilices <br> para incrementar el espacio entre líneas de texto; para eso usa la propiedad margin de CSS o el elemento <p>. Es exactamente el mismo tipo de fallo silencioso del que hablaba en por qué NULL no es menor que una fecha: algo que se ve bien, funciona en apariencia y está mal por dentro.

La alternativa correcta: párrafos con <p> y separación con margin

Lo que el ejemplo anterior quería decir se escribe así:

<p>Ofrezco desarrollo a medida con Laravel, Node y Python.</p>
<p>También automatizo procesos internos con IA.</p>

Dos ideas, dos párrafos, dos elementos <p>. Y el espacio entre ellos lo pone el CSS, no el marcado:

p {
  margin-block: 0 1.5rem; /* sin margen arriba, 1.5rem abajo */
}

Ahora sí puedes controlar el aire con precisión, cambiarlo en un sitio para toda la web, y la estructura del documento dice la verdad: dos párrafos independientes. Esta es la separación semántica. La de <br> es la separación dentro de un contenido. No compiten: resuelven cosas distintas. Continuar una dirección en la línea de abajo es <br>; empezar una idea nueva es <p>.

<wbr>: dónde permitir que se parta una palabra o una URL larga

Ahora, el problema inverso. A veces no quieres forzar un salto, sino ofrecer un punto por donde el navegador pueda partir una palabra larguísima si le hace falta. Para eso está <wbr> (Word Break Opportunity).

<wbr> no fuerza nada. Marca una posición donde el navegador puede romper la línea aunque sus reglas normales no lo harían ahí. Si la palabra cabe entera, no pasa nada; si no cabe, se parte por donde tú dijiste, y no por donde caiga.

El caso clásico es una URL sin espacios que revienta el ancho en el móvil:

<p>
  El endpoint es
  https://api.midominio.com/v1/<wbr>clientes/<wbr>2048/<wbr>facturas
</p>

Colocas los <wbr> en los puntos lógicos, después de cada barra, y la URL se parte por ahí en lugar de desbordar o cortarse en cualquier carácter. Un detalle importante: <wbr> no añade un guion en el punto de corte. La palabra se parte a secas. Si quieres que aparezca un guion cuando se rompe, necesitas otra herramienta.

­ (guion blando) frente a <wbr>: partir con guion o sin guion

Esa otra herramienta es ­, el guion blando (soft hyphen). Hace lo mismo que <wbr>, ofrecer un punto de corte opcional, pero con una diferencia clave: si la palabra se parte ahí, aparece un guion; si no se parte, el guion no se ve. Es invisible salvo cuando hace falta.

<p>super­cali­fragilístico­espialidoso­<wbr></p>

La regla para elegir:

• Palabra normal de un idioma que, al partirse, debe llevar guion como manda la ortografía → ­.
• Cadena técnica donde un guion sería confuso o erróneo (una URL, un identificador, un hash, una ruta) → <wbr>, que parte sin añadir nada.

Meter un guion en mitad de una URL con ­ es un error sutil: si el usuario copia la línea partida, se lleva un guion que no forma parte de la dirección. Para URLs, <wbr>. Para palabras, ­.

 : el espacio duro que NO permite el salto

Los tres anteriores buscan permitir un corte.   hace justo lo contrario: es un espacio que prohíbe el salto. Un espacio duro (non-breaking space). El navegador nunca romperá la línea en un  , así que las dos palabras que une viajan siempre juntas.

Sirve para que ciertas cosas no se separen nunca entre dos líneas:

<p>La entrada cuesta 50 €.</p>
<p>Nos vemos el 12 de julio.</p>
<p>Real Madrid C. F. juega el domingo.</p>

Una cifra y su unidad, un número y su mes, las siglas de un nombre propio: cosas que quedan feas, y a veces confusas, si el salto de línea las parte. 50 al final de una línea y € al principio de la siguiente se lee mal. Con   eso no ocurre.

Cuidado con un abuso frecuente: usar varios   seguidos para "hacer sangría" o "empujar" texto. Eso es maquetar con espacios, el primo hermano del <br><br>. Para sangrías y separaciones, CSS (padding, margin, text-indent).

Controlar el salto desde CSS: white-space

Hasta aquí, HTML. Pero buena parte del comportamiento del salto se decide en CSS, y la propiedad central es white-space. Controla dos cosas a la vez: si los espacios en blanco del código se colapsan, y si el texto hace wrap (salta solo al llegar al borde).

Los dos que más uso:

/* Un bloque de código: respeta sangrías y saltos, y aun así se ajusta al ancho */
.codigo {
  white-space: pre-wrap;
}

/* Un texto que no debe partirse nunca, como un botón o una etiqueta corta */
.una-linea {
  white-space: nowrap;
}

pre-wrap es lo que quieres para mostrar código en la web: conserva la indentación y los saltos que escribiste, pero no desborda en pantallas estrechas. nowrap fuerza que todo vaya en una línea; úsalo con cabeza, porque si el texto es largo, desbordará. Con nowrap, el único salto que se respeta es el de un <br> explícito.

overflow-wrap frente a word-break: cuál usar y por qué

Cuando una palabra es más larga que su contenedor, una URL, un correo, un identificador, hay dos propiedades para partirla, y confundirlas da resultados feos.

overflow-wrap: break-word es la civilizada: solo parte una palabra como último recurso, cuando no cabe entera en su propia línea sin desbordar. Las palabras normales las respeta; solo trocea la que no cabe de ninguna forma. Es lo que quieres el 95 % de las veces.

word-break: break-all es la agresiva: parte por cualquier carácter en cuanto se llega al borde, aunque la palabra cupiese en la línea siguiente. El resultado es un texto troceado sin criterio, con palabras cortadas a media sílaba por todas partes. Casi nunca es lo que buscas en un texto latino; tiene sentido en contextos CJK (chino, japonés, coreano) o cuando de verdad da igual dónde se corte.

/* Recomendado: solo parte lo que no cabe */
.contenido {
  overflow-wrap: break-word;
}

/* Agresivo: parte en cualquier carácter. Úsalo con conocimiento */
.tabla-estrecha {
  word-break: break-all;
}

Si dudas, overflow-wrap: break-word. Ninguna de las dos añade guion al partir.

hyphens: auto y por qué necesita el atributo lang

Si quieres guionado automático de verdad, que el navegador parta las palabras largas siguiendo las reglas del idioma y ponga el guion, la propiedad es hyphens. Sus valores son none, manual (el valor por defecto) y auto.

Y aquí está el fallo que hace perder horas: hyphens: auto solo funciona si el elemento, o un ancestro, declara el idioma con el atributo lang. Sin lang, el navegador no sabe qué diccionario de guionado aplicar, y no guiona nada. Lo pones, no ves ningún guion, y crees que la propiedad no funciona. Funciona; le falta el idioma.

<article lang="es">
  <p class="justificado">
    Palabra larguísima que el navegador guionará según las reglas del español.
  </p>
</article>

.justificado {
  hyphens: auto;
  text-align: justify; /* donde más se nota el guionado */
}

El lang="es" suele ir en el <html> de toda página bien hecha, así que muchas veces ya está puesto y hyphens: auto funciona sin más. Pero si copias un componente a un contexto sin lang, deja de guionar. Regla: hyphens: auto sin lang es una propiedad muerta.

Tabla comparativa: qué hace cada herramienta

Ocho formas de intervenir en el salto de línea, una al lado de otra:

Guárdate la columna del guion: solo ­ y hyphens: auto añaden guion al partir. Todo lo demás corta sin él.

Caso real: una URL que desborda en el móvil

El problema más común que resuelve todo esto: un enlace largo, un correo o un identificador que en el escritorio cabe pero en el móvil se sale del contenedor y provoca scroll horizontal en toda la página. La solución robusta combina varias piezas, cada una en su papel:

.contenido-usuario {
  overflow-wrap: break-word; /* red de seguridad: parte lo que no quepa */
  hyphens: auto;             /* guiona palabras normales (con lang en un ancestro) */
}

<article lang="es">
  <p class="contenido-usuario">
    Escríbeme a [email protected]
    o revisa https://midominio.com/blog/<wbr>texto-etiqueta-html-br-y-wbr
  </p>
</article>

El reparto de papeles:

• overflow-wrap: break-word es la red de seguridad. Garantiza que nada desborde, aunque el contenido sea impredecible (lo escribe un usuario, viene de una base de datos). No añade guion y respeta las palabras salvo que no quepan.
• <wbr> te da control fino donde sabes que habrá cadenas largas: colocas los cortes en puntos lógicos de la URL y evitas que se parta en un sitio raro.
• hyphens: auto mejora la lectura de las palabras normales, pero recuerda: sin lang, no hace nada.
• word-break: break-all no lo pondría aquí. Trocearía correos y palabras corrientes sin motivo, y eso se lee peor que un desbordamiento. Es la herramienta equivocada para texto latino.

Con overflow-wrap: break-word como base y <wbr> en los sitios previsibles, la URL de este mismo artículo se ajusta sola a cualquier pantalla sin romper la maqueta.

Accesibilidad: qué anuncia un lector de pantalla con <br> y qué con <p>

Este es el argumento que zanja el debate del <br><br>, y el que casi ningún tutorial en español menciona. Un lector de pantalla no "ve" el espacio: interpreta la estructura del documento.

Ante dos elementos <p>, un lector de pantalla los reconoce como dos párrafos: hace una pausa entre ellos, y muchos permiten navegar párrafo a párrafo con un atajo, saltando de uno a otro. La estructura es información útil para quien no ve la pantalla.

Ante <br>, la documentación de accesibilidad de MDN es clara: crear párrafos separados con <br> es problemático para quien usa un lector de pantalla. El lector puede anunciar la presencia del elemento, pero no hay ninguna estructura de párrafo que anunciar: es todo el mismo bloque. Se pierde la posibilidad de navegar por párrafos y la cadencia de lectura se vuelve rara.

Traducido: cuando escribes <br><br> entre dos ideas, a quien lee con la vista le llega un hueco; a quien lee con un lector de pantalla le llega un párrafo único y confuso. Un <p> de más no cuesta nada y arregla ambas experiencias a la vez. Para el <br> legítimo, el verso, la dirección, no hay problema: ahí el salto es parte del contenido, y está bien que se lea corrido dentro del mismo bloque. El problema nunca fue <br>; fue usarlo para estructurar. Si quieres profundizar en cómo pienso el frontend accesible y mantenible, lo cuento en qué domino y cómo trabajo.