¿Cuándo debo usar en lugar de ?

Usa cuando el salto de línea forma parte del propio contenido, como en una dirección o un poema. Usa elementos separados para párrafos distintos, y el margin de CSS para el espaciado, en lugar de apilar etiquetas .

Docs ejecutables de HTML: Salto de línea

Q: ¿Cómo hago un salto de línea en HTML?

Inserta donde debe empezar la nueva línea: Línea uno Línea dos. Pulsar Enter en tu archivo HTML no funciona, porque los navegadores tratan los saltos de línea del código fuente como espacios normales.

Q: ¿Debo escribir , o ?

Los tres funcionan en HTML y producen el mismo elemento. es la forma HTML simple; las versiones con barra se aceptan por compatibilidad con XHTML y JSX. solo no es válido, aunque los navegadores lo leen como otro salto de línea.

Q: ¿Cómo conservo los saltos de línea de un texto sin añadir etiquetas ?

Dale al elemento white-space: pre-line en el CSS. El navegador muestra entonces cada salto de línea del texto como un salto real, y sigue juntando los espacios sobrantes. Es útil para comentarios de usuarios y texto cargado con JavaScript.

Q: ¿Cómo evito un salto de línea en HTML?

Envuelve el texto en un elemento con white-space: nowrap, o une dos palabras con un espacio de no separación para que siempre queden en la misma línea.

Salto de línea en HTML: la etiqueta br y los cortes de línea

Usa para empezar una línea nueva dentro de un bloque de texto. Aprende cuándo es lo correcto y cuándo es mejor un párrafo, cómo conservar los saltos de línea de tu texto, cómo dejar que las palabras largas se corten con y cómo evitar que una línea se corte.

Esta página incluye editores ejecutables: edita, ejecuta y ve el resultado al instante.

Por Kevin Spektor, Co-founder & CTO

Publicado el Sep 24, 2026

Cómo hacer un salto de línea

Pon   donde quieras que empiece la línea nueva. Es un elemento vacío, así que no tiene etiqueta de cierre:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line break</title>
</head>
<body>
  <p>
    Coddy Ltd.<br>
    12 Market Street<br>
    Springfield
  </p>
  <p>Pressing Enter in the source
     does not break the line.</p>
</body>
</html>

La dirección se corta justo en cada  . El segundo párrafo se queda en una línea aunque el código fuente tenga un salto de línea dentro: HTML trata los saltos de línea, las tabulaciones y las series de espacios como un solo espacio. Por eso existe  .

 ,   y   producen el mismo elemento. Usa el que use tu proyecto (JSX y XHTML exigen la barra).

br vs p: los saltos no son espaciado

Un   termina una línea dentro del mismo párrafo. Un  nuevo empieza un párrafo nuevo, con espacio arriba y abajo gracias a los márgenes por defecto. Apilar etiquetas   para crear espacio funciona, pero es frágil y dice algo que no es:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>br vs p</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .box { border: 2px solid #e5e7eb; padding: 0 12px; margin-bottom: 12px; }
    .spaced p { margin: 0 0 24px; }
  </style>
</head>
<body>
  <div class="box">
    <p>With br tags:<br><br><br>Second paragraph?</p>
  </div>
  <div class="box spaced">
    <p>With two paragraphs and CSS margin:</p>
    <p>Second paragraph.</p>
  </div>
</body>
</html>

Las dos cajas se ven parecidas, pero para un lector de pantalla la primera es un solo párrafo, y cambiar el espaciado obliga a editar cada página. En la segunda, el hueco es una línea de CSS.

Buenos usos de  : direcciones, poemas y letras de canciones, y las líneas de una firma, donde el salto pertenece al texto. Para todo lo demás, usa párrafos, listas o encabezados.

Conservar los saltos de línea de tu texto

Cuando el texto viene de otro sitio (un cuadro de comentarios, una base de datos, un script), tiene caracteres de salto de línea reales en lugar de etiquetas  . El CSS white-space: pre-line hace que el navegador muestre esos saltos como saltos de línea:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>pre-line</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .msg { border: 2px solid #e5e7eb; padding: 8px 12px; margin-bottom: 8px; }
    .keep { white-space: pre-line; border-color: #2563eb; }
  </style>
</head>
<body>
  <div class="msg" id="a"></div>
  <div class="msg keep" id="b"></div>
  <script>
    const text = 'Hi team,\nThe build is fixed.\nThanks!';
    document.getElementById('a').textContent = text;
    document.getElementById('b').textContent = text;
  </script>
</body>
</html>

La misma cadena se ve en una línea en la caja gris y en tres líneas en la azul. Además es más seguro que meter etiquetas   en el texto de los usuarios con innerHTML, lo que les permitiría inyectar HTML. Para conservar también los espacios y la sangría, usa white-space: pre, que se explica en la página de espacios en HTML.

Dejar que las palabras largas se corten: wbr

Una palabra o una URL larga sin espacios puede desbordar una caja estrecha.  marca un punto donde el navegador puede cortar la línea si lo necesita, y no hace nada en caso contrario:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wbr</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .narrow { width: 160px; border: 2px solid #f59e0b; padding: 4px; margin-bottom: 12px; }
  </style>
</head>
<body>
  <div class="narrow">example.com/docs/html/line-break-tag</div>
  <div class="narrow">example.com/<wbr>docs/<wbr>html/<wbr>line-break-tag</div>
</body>
</html>

La primera ruta se sale de su caja; la segunda se corta en los puntos . Para texto que no controlas, la propiedad CSS overflow-wrap: anywhere corta las palabras largas en cualquier punto.

Evitar que una línea se corte

A veces quieres lo contrario: mantener juntos "10 km" o un número de teléfono. Hay dos herramientas:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>No break</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .narrow { width: 170px; border: 2px solid #16a34a; padding: 4px; }
    .nowrap { white-space: nowrap; }
  </style>
</head>
<body>
  <p class="narrow">The race is exactly 10&nbsp;km long, call <span class="nowrap">+1 555 0100</span> to join.</p>
</body>
</html>

  es un espacio en el que el navegador no corta la línea, así que "10" y "km" se quedan juntos. white-space: nowrap mantiene todo un span en una línea. Cambia   por un espacio normal, o quita la clase, y con este ancho los dos se parten en dos líneas.

Errores comunes

Pulsar Enter en el código fuente y esperar una línea nueva. Los saltos de línea en HTML son espacios. Usa  , elementos separados o white-space: pre-line.
Apilar   para dar espacio. Usa párrafos y margin.
Usar   para construir una lista. Usa <ul> u <ol> con <li>, que los lectores de pantalla anuncian como lista.
Escribir . No es válido. Escribe  .
Añadir   al texto de los usuarios con innerHTML. Asigna textContent y usa white-space: pre-line en su lugar.

Preguntas frecuentes

¿Cómo hago un salto de línea en HTML?

Inserta   donde debe empezar la nueva línea: Línea uno Línea dos. Pulsar Enter en tu archivo HTML no funciona, porque los navegadores tratan los saltos de línea del código fuente como espacios normales.

¿Debo escribir , o ?

Los tres funcionan en HTML y producen el mismo elemento.   es la forma HTML simple; las versiones con barra se aceptan por compatibilidad con XHTML y JSX.  solo no es válido, aunque los navegadores lo leen como otro salto de línea.

¿Cuándo debo usar en lugar de ?

Usa   cuando el salto de línea forma parte del propio contenido, como en una dirección o un poema. Usa elementos  separados para párrafos distintos, y el margin de CSS para el espaciado, en lugar de apilar etiquetas  .

¿Cómo conservo los saltos de línea de un texto sin añadir etiquetas ?

Dale al elemento white-space: pre-line en el CSS. El navegador muestra entonces cada salto de línea del texto como un salto real, y sigue juntando los espacios sobrantes. Es útil para comentarios de usuarios y texto cargado con JavaScript.

¿Cómo evito un salto de línea en HTML?

Envuelve el texto en un elemento con white-space: nowrap, o une dos palabras con un espacio de no separación   para que siempre queden en la misma línea.

Conceptos relacionados