Guía rápida sobre el elemento br en HTML: qué es, cómo se usa y cuándo conviene emplearlo

El elemento <br> es uno de los más sencillos y, al mismo tiempo, uno de los más incomprendidos del HTML. Sirve para generar un salto de línea dentro del contenido —ni más, ni menos— y aun así es común encontrar páginas llenas de <br> usados para todo tipo de separaciones. Lo he visto muchas veces, y sí, a veces yo mismo he tenido que tirar de <br> cuando no podía tocar los márgenes o el CSS. Pero para sacarle todo el partido es importante saber cuándo usarlo, cuándo evitarlo y cómo escribirlo correctamente.

¿Qué es el elemento <br> y para qué sirve en HTML?

El elemento <br> (line break) es una etiqueta HTML que fuerza un salto de línea en el texto. Es decir, obliga a que el contenido siguiente aparezca en la línea inferior, independientemente de si ese salto tiene sentido semántico o no.

El concepto de “salto de línea” explicado de forma simple

Imagina escribir en un editor de texto donde presionas Enter para bajar a la siguiente línea. <br> hace exactamente eso, pero dentro de un documento HTML.

Por qué <br> es un elemento vacío (void element)

<br> pertenece al grupo de las “void elements”, lo que significa que no tiene etiqueta de cierre. Otros ejemplos son <img>, <hr> o <meta>.

Debido a esto:

En HTML:

<br>

Es totalmente válido.

En XHTML:

<br />

Es la forma obligatoria.

En resumen, el elemento br sirve para dar un salto de línea, empleando simplemente la etiqueta:

<br>

La etiqueta que nunca cierra: br

HTML es un lenguaje de marcado bastante abierto que como te habrás dado cuenta si desarrollar o crear páginas webs, puedes colocar errores y aun así la página se ve o correctamente o con algunos tropiezos; es decir, podemos abrir una etiqueta <p> y cerrar con un <h2>:

<p>Texto<h2>

O inclusive no cerrar algunas etiquetas:

<h3>Texto

Aunque cabe señalar que los ejemplos anteriores son errores y por lo tanto tenemos que evitarlos; por otra parte, también tenemos etiquetas que se colocan y listo, no tienen etiqueta de cerrado; por ejemplo las de <img>, <hr> e inclusive la misma <br> que es nuestro caso de interés para esta entrada.

Ejemplos prácticos del uso del elemento <br>

Ahora si quieres maquetar con XHTML que es un lenguaje de marcado basado en el HTML pero menos abierto o con una sintaxis más cerrada, entonces es obligatorio que todas las etiquetas cierren:

<br />

En este caso este formato.

</br>

O este:

<br>

No serían válidos en XHTML; aunque es una buena práctica cerrarlas para que sea compatible con XHTML y estar más organizado pero la decisión es tuya.

Diferencias entre el uso de la etiqueta BR en HTML y XHTML

Como bien debes saber, XHTML es la formas más organizada y estricta de HTML, cosas que podemos hacer en HTML y son soportadas por nuestros navegadores no las podemos hacer en XHTML y la etiqueta br da un buen ejemplo de lo que podemos hacer y no en XHTML; en HTML la etiqueta <br> no tiene que cerrar, como mostramos anteriormente; mientras que en XHTML la etiqueta <br /> si tiene que cerrar, como la mostrada anteriormente.

Ejemplo de uso de la etiqueta br: Saltos de línea en HTML

Como indicamos, la etiqueta BR es especialmente útil para romper entre líneas; en si es su única utilidad en este lenguaje de marcado:

<p> Para romper líneas <br> en un texto,<br>usa el elemento br </p>

Para romper líneas 
en un texto,
usa el elemento br

Saltos de línea en contenidos “rígidos”

Aquí entra otro de los usos que me encuentro muchísimo: emails HTML, generadores automáticos o gestores de contenido que no permiten manipular hojas de estilo. 

En estos casos, como me ocurre a veces, <br> se convierte en una herramienta práctica cuando el margen simplemente “no existe” como opción.

Otra forma de saltos de línea: Párrafos en HTML

También podemos incluir los saltos de línea con nuestros párrafos con la etiqueta correspondiente:

<p> Para romper líneas <p></p> en un texto,<br>usa el elemento br </p>

Para romper líneas

en un texto,
usa el elemento br 

Puedes tener más información sobre el uso de la etiqueta p.

Para indicar al navegador que queremos poner un salto de línea como un párrafo; con esto no tendremos que preocuparnos si el espacio es mayor al empleado en la redacción con nuestros párrafos ya que es equivalente al ser la misma etiqueta.

Sintaxis correcta de <br> en HTML y XHTML

Aunque hoy en día casi todo lo que hacemos es HTML5, sigue habiendo dudas sobre cuál es la forma “correcta”.

<br> vs <br />: cuál usar en 2025

• HTML5: se recomienda <br> a secas.
• XHTML o entornos XML: <br /> es obligatorio.

Dicho esto, en muchos proyectos he usado <br /> por costumbre porque me ayuda visualmente a identificar que es un elemento vacío, pero no es obligatorio en HTML.

Errores comunes al escribir esta etiqueta

• Escribir </br> → No existe, no debe usarse.
• Usarlo como separador general en vez de como salto de línea.
• Escribir decenas de <br> seguidos para empujar el contenido hacia abajo (todos hemos visto esto alguna vez…).

Cuándo usar <br> (y cuándo NO usarlo)

Aquí viene lo importante: no todos los saltos de línea son iguales. Y <br> no es la herramienta universal para separar cosas.

• Casos prácticos donde <br> es realmente útil
• Hay situaciones donde <br> es perfecto:
• Poesía o texto donde cada línea tiene significado propio.
• Direcciones postales.
• Textos breves donde un salto manual mejora la lectura.
• Formularios o elementos muy compactos.
• Contenidos con maquetación rígida como algunos editores de email.

El <br> me ha salvado más de una vez cuando no podía tocar los márgenes porque el entorno no lo permitía o porque un maquetador WYSIWYG imponía sus propias reglas. A veces es la solución rápida y directa que evita pelear con el CSS.

Situaciones donde usar márgenes, <p> o CSS es mejor opción

• Separar párrafos → mejor <p>.
• Separar bloques de contenido → mejor margin o padding.
• Crear espacios grandes → nunca con <br>, siempre con CSS.

He visto casos donde usar <br> parecía más rápido, pero luego, cuando el proyecto creció, esos saltos empezaron a romper el layout y obligaron a rehacer media página.

Problemas que causa el abuso del <br> en maquetación

• Rompe la semántica del documento.
• Complica la accesibilidad.
• Hace imposible mantener un diseño consistente.
• Aumenta el tiempo de mantenimiento.
• Deja el HTML desordenado y frágil.

Alternativas al <br> para separar contenido

• Usar <p> para separar bloques de texto
  • Ideal cuando cada bloque tiene una idea completa. Es la forma semánticamente correcta de separar contenido.
• Manejar espacios con CSS: margin, padding, line-height
  • El 90% de los espacios visuales debería venir de CSS, no de HTML.
• Cuándo combinar <br> + CSS puede ser una buena estrategia
  • Formularios donde necesitas un salto ligero pero quieres mantener control de estilos.
  • Listas o textos donde el contenido puede cambiar.
• Más de una vez he tenido que usar esta combinación cuando el diseño lo pedía pero el CSS del sistema estaba “bloqueado” o fuera de alcance.

Accesibilidad y buenas prácticas al usar <br>

• Cómo afecta a lectores de pantalla
  • Para los lectores de pantalla, <br> representa una pausa leve, pero abusar de ellos puede causar confusión o romper la continuidad del texto.
• Por qué un exceso de <br> rompe la semántica del documento
  • El HTML debería describir contenido, no estilos.
    Si usas <br> para maquetar, estás mezclando roles.
• Recomendaciones para mantener un HTML limpio
  • Úsalo solo para saltos de línea reales.
  • Prefiere CSS para espaciado.
  • Evita duplicar <br> sin necesidad.
  • Hazlo consistente en todo el proyecto.

Eventos, CSS y atributos de la etiqueta BR

La etiqueta br no tiene ningún atributo o evento en particular, los globales para la API de HTML si es hablando de CSS, tampoco toma estilos en particular salvo los display:none para ocultar el elemento y por lo tanto dejaría de surgir efecto el salto de línea.

La w3schools recomienda utilizar el elemento <br> para salto de lineas, mas no para separar párrafos; para esto último es mejor emplear otras técnicas como la propiedad margin en CSS.

Preguntas frecuentes sobre el elemento <br>

• ¿Es obligatorio cerrar <br>?
  • En HTML, no. En XHTML, sí.
• ¿Cuántos <br> son demasiados?
  • Más de 1 seguido casi siempre indica un problema en la maquetación.
• ¿Sigue siendo válido en HTML5?
  • Sí, completamente.
• ¿Se puede estilizar <br> con CSS?
  • Casi no. Solo responde a propiedades como display: none.

Conclusión

El elemento <br> es simple, pero su uso correcto marca la diferencia entre un HTML limpio y uno lleno de “parches”. Es perfecto para saltos de línea puntuales, textos con estructura especial o entornos donde el CSS no está disponible (algo que, sinceramente, me ha pasado más veces de las que me gustaría). Pero cuando necesitas separar bloques de contenido o generar espacios grandes, siempre es mejor recurrir a <p>, márgenes o estilos.

Saber la diferencia te da control, claridad y un código más fácil de mantener.