Referencia de etiquetas

Etiqueta br en HTML: cuándo usar un salto de línea

La etiqueta   introduce un salto de línea significativo dentro de un texto. Sirve para conservar la separación entre versos o entre las líneas de una dirección postal, aunque haya espacio para escribirlos seguidos. Úsala cuando el lugar del salto forme parte del contenido.

Ejemplo mínimo: una dirección en dos líneas

<p>Calle del Sol 18<br>Ciudad de México</p>

El navegador muestra «Calle del Sol 18» en la primera línea y «Ciudad de México» en la siguiente. Las dos líneas pertenecen al mismo párrafo:   no termina el elemento  ni crea otro.

Para probarlo, copia el fragmento dentro del <body> de un documento HTML; puedes usar el documento completo del ejemplo práctico y sustituir su contenido principal por este párrafo. La dirección es ficticia y no necesita archivos adicionales.

Si sustituyes   por un espacio, ambas partes podrán aparecer en una misma línea cuando quepan. Si lo eliminas sin dejar ningún espacio, el código anterior juntará 18Ciudad. Cambiar la posición de   cambia el punto donde comienza la siguiente línea.

Sintaxis y contexto válido

Escribe   en el punto del salto. Es un elemento vacío: no contiene texto ni otros elementos y no lleva etiqueta de cierre. No escribas  ni intentes envolver contenido entre una apertura y un cierre.

La forma   también se admite en HTML, pero la barra no añade un cierre ni cambia su comportamiento. Sigue siendo un elemento vacío. Para aprender esta sintaxis basta con  . La barra tampoco permite autocerrar elementos HTML que sí admiten contenido, como . Estas reglas se describen en la sintaxis de elementos del estándar HTML.

Puede aparecer donde se admita contenido de frase, por ejemplo dentro de  o . No es válido colocarlo directamente dentro de un <ul> entre sus elementos <li>. Su modelo de contenido y los contextos permitidos están en la definición normativa de  .

Cuándo usar br, p o separación con CSS

En una estrofa, cada verso necesita conservar su inicio. En una dirección, separar la calle de la localidad ayuda a mantener la organización del texto. Son usos de   previstos por el estándar.

Una dirección postal no exige por sí sola <address>. La etiqueta <address> representa información de contacto de la página o del artículo al que pertenece; una dirección mencionada en un relato puede estar en un  normal.

Para expresar dos ideas en párrafos distintos, escribe dos elementos :

<p>El taller abre a las nueve.</p>
<p>Trae una libreta para tomar notas.</p>

Cada párrafo constituye una unidad propia. Su distancia visual se puede ajustar con márgenes CSS. Insertar   dentro de un solo párrafo puede producir un hueco, pero no expresa esa estructura. Si necesitas columnas o separar controles de un formulario, organiza los elementos correspondientes con CSS.

Caso práctico: versos y prosa en una página

Guarda este código como lectura.html, con codificación UTF-8, y abre el archivo en un navegador. Incluye todo el HTML y CSS necesario; funciona sin JavaScript ni servidor.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Versos y párrafos</title>
    <style>
      body {
        max-width: 40rem;
        margin: 2rem auto;
        padding: 0 1rem;
        font-family: sans-serif;
        line-height: 1.6;
      }

      .prosa p {
        margin: 0;
      }

      .prosa p + p {
        margin-top: 1.25rem;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>Una mañana de lectura</h1>
      <h2>Estrofa</h2>
      <p class="estrofa">
        La luz se posa en la mesa,<br>
        el patio despierta despacio,<br>
        mi taza guarda el silencio.
      </p>

      <h2>Prosa</h2>
      <div class="prosa">
        <p>Abro la ventana y dejo entrar el aire de la mañana.</p>
        <p>Después preparo la mesa para leer unas páginas.</p>
      </div>
    </main>
  </body>
</html>

La estrofa original tiene tres versos y dos etiquetas  : una después del primer verso y otra después del segundo. No hace falta un salto al final del último. Cada verso comienza en una línea nueva; si la ventana es muy estrecha, un verso también puede ocupar varias líneas por el ajuste normal del texto.

La prosa tiene dos párrafos sin  . El selector .prosa p + p aplica un margen superior al párrafo que sigue a otro dentro de ese contenedor. margin-top controla la distancia entre ellos, mientras que line-height controla la altura de las líneas. Los márgenes son propiedades CSS; no añaden párrafos al HTML.

Prueba estos cambios por separado:

Retira los dos   de la estrofa. Los saltos escritos en el archivo no conservarán por sí solos los tres versos con los estilos de este ejemplo.
Cambia margin-top: 1.25rem a margin-top: 2rem. Aumentará el espacio entre los párrafos de prosa sin alterar su contenido ni su número.
Reduce el ancho de la ventana. El texto se ajustará al espacio disponible y los saltos de los versos seguirán en sus puntos originales.

Atributos y lectura accesible

  no tiene atributos específicos vigentes. Admite atributos globales como id o class, aunque un salto sencillo no necesita ninguno. El antiguo atributo clear es obsoleto y no debe añadirse a ejemplos nuevos.

Los saltos repetidos para fabricar espacios verticales pueden dificultar la lectura con tecnologías de asistencia. La forma de presentar o anunciar un salto depende del navegador y del lector de pantalla. Conserva párrafos reales para la prosa y reserva   para separaciones significativas; MDN explica este problema de accesibilidad.

Preguntas frecuentes y errores habituales

¿Br lleva etiqueta de cierre?

No.   es un elemento vacío. Escribir  es un error de autoría, aunque un navegador intente reparar el HTML.

¿Por qué no usar br para separar párrafos?

Porque un salto de línea no expresa una nueva unidad de párrafo. Utiliza un  para cada párrafo y ajusta el espacio con CSS, como en el ejemplo práctico.

¿Pulsar Enter en el editor crea un salto de línea en HTML?

Con el tratamiento habitual del espacio en blanco, no conserva ese salto visual: el navegador puede tratarlo como un espacio. El comportamiento puede cambiar con CSS, por ejemplo al preservar texto preformateado. La propiedad white-space regula ese tratamiento;   indica un salto explícito dentro del contenido.

¿En qué se diferencia de wbr y hr?

 ofrece un punto opcional de división cuando el texto no cabe;   introduce el salto en ese lugar aunque haya espacio. Si buscas marcar un cambio de tema, <hr> expresa una separación temática, no una nueva línea de la misma frase. Consulta las guías de  y <hr> para esas decisiones.

Compatibilidad y fuentes

Consultado el 3 de octubre de 2026: el elemento   está disponible en los navegadores actuales Chrome, Edge, Firefox y Safari. MDN lo clasifica como ampliamente disponible. Los ejemplos usan el salto básico y CSS habitual, sin APIs de JavaScript ni funciones experimentales.

Para comprobar las reglas de autoría, utiliza el HTML Living Standard sobre  . La referencia de MDN complementa el estándar con los atributos antiguos y las recomendaciones de uso.