Qué es un salto de línea en HTML, cómo hacerlo y ejemplos

En HTML los párrafos siempre comienzan con una nueva línea, pero ¿qué pasa si quieres que el texto dentro de un mismo párrafo empiece así? En ese caso, necesitarás crear un salto de línea, también conocido como line break en inglés.

Recuerda que el formato que des a tus contenidos en HTML puede impactar en la manera en que aparecen a los visitantes de tu sitio. Ya sea que uses saltos de línea o espacios HTML, deberás utilizar el mejor método para que tu sitio luzca espectacular.

Revisemos los detalles de este elemento de HTML y aprende a utilizarlo en tus programas.

Muchas veces la etiqueta <p> es suficiente para dividir tu contenido, pero cuando no es posible, <br> puede ser tu mejor aliado. Este elemento es especialmente útil para mostrar poemas, letras de canciones y cualquier otro tipo de texto para los que la división de texto es importante o da una forma relevante al contenido.

En el siguiente ejemplo puedes ver la forma en que conviven los elementos <p> y <br>.

Ya sea que quieras escribir un poema, la letra de una canción o una dirección postal, es necesario que sepas los alcances y limitaciones del elemento.

Características del salto de línea <br> en HTML

No tiene un significado semántico

Esto significa que, a diferencia de <p> o <div>, esta etiqueta no denota algo en específico, como un párrafo o una sección. El salto de línea tiene un significado en la carga visual de tu código a través de un navegador, pero que no afecta estructuralmente tus documentos.

No requiere un cierre de línea

En contraposición a algunos otros elementos y etiquetas, el salto de línea no requiere de un cierre. Por el contrario, es un indicativo abierto que hace referencia a todo lo que está después de él. Es por ello que comúnmente se le entiende como una etiqueta vacía. 

Es una herramienta de soporte común 

El elemento <br> tiene la ventaja de ser soportado por la mayoría de los navegadores web modernos. Esto se debe a que es un elemento de HTML y todos los navegadores se basan en su uso. Por ejemplo, funcionará correctamente en Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera y Brave, entre muchos otros.

No comparte estilos con CSS

En contraposición a otros elementos HTML, <br> no tiene ningún estilo específico en CSS que pueda ser aplicado a este de forma directa. Por el contrario, los estilos CSS son aplicables a elementos que afectan bloques de texto o bien propiedades en una línea concreta. 

Como hemos visto, <br> es una etiqueta vacía, por lo que no puede compaginarse con elementos CSS. Aun así, es factible que sea afectada por ellos cuando la indicación <br> está dentro de un bloque.

Tiene accesibilidad limitada

A pesar de que el salto de línea puede ser realmente útil en algunos casos, es importante considerar sus capacidades de accesibilidad. En algunos casos esta etiqueta puede no ser reconocida por algunos navegadores, especialmente aquellos que ofrecen funcionalidad de accesibilidad (como audio asistido).

Esto puede crear confusión entre aquellos que necesitan estas herramientas para consultar sitios web, ya sea que solo utilicen teclados para navegar o que requieran tecnologías de asistencia. 

No es una herramienta responsiva

Otro punto a considerar del salto de línea es que la etiqueta <br> no ha sido diseñada para sitios responsivos. Por el contrario, funciona idealmente solo en páginas estáticas y no para el cambio de pantallas.

Ilustra este problema, el siguiente ejemplo. En inicio, podrías querer usar un bloque de texto que se ajuste a los márgenes de tu pantalla. 

Si usas la etiqueta <br> terminarías con un código similar a este:

<figure> <p>Eso es lo que dicen las mujeres del pueblo:<br> que no hay tesoro ahí dentro, que no hay oro ni plata ni diamantes<br>ni nada más que un dolor punzante que se niega a disolverse.<figcaption>—Fernanda Melchor, <cite>Temporada de huracanes</cite></figcaption> </figure>

Y este código lucirá así:

Si haces más grande o más pequeña tu pantalla notarás que el párrafo con saltos de línea tendrá un mal aspecto. Esto significa que el problema no solo es de accesibilidad, sino que la construcción de la página es inadecuada. Esta sería una mejor manera de crear el salto:

<figure> <blockquote> <p>Eso es lo que dicen las mujeres del pueblo: 
  que no hay tesoro ahí dentro, que no hay oro ni plata ni diamantes ni nada más que un dolor punzante que se niega a disolverse.</p> </blockquote> <figcaption>—Fernanda Melchor, <cite>Temporada de huracanes</cite></figcaption> </figure>

Y el resultado se verá así:

Usar el elemento <blockquote> te dará ventajas de accesibilidad, así como un sistema mucho más responsivo. Si ahora cambias el tamaño de la pantalla notarás que el texto se ajustará de manera correcta.

Ejemplos de uso de <br> para salto de línea

Escribir direcciones postales

Por ejemplo: estás escribiendo un contenido para tu blog sobre la forma en que debes escribir la dirección en un sobre o envío y quieres incluir una propuesta de cómo hacerlo. En este caso, puedes usar un salto de línea para ubicar el nombre del remitente en una línea, la dirección en otra y la ciudad, estado y código postal en una más. 

La dirección puede ser escrita de dos formas diferentes. Una, utilizando párrafos individuales y la otra, mediante la indicación <br>. El problema con el primer caso es que el sistema incluirá espaciados entre líneas. 

En cambio, usando este código, obtendrás otro resultado:

<p>Lidia Figueroa<br>
11378 Calle X<br>
Ciudad, Estado 00000</p>

Redactar poemas

Ahora, supongamos que quieres mostrar un poema en tu sitio web.

En este caso, lo que deberás hacer es incluir tu texto entre las etiquetas <p></p>. Ahora, será necesario utilizar la etiqueta <br> en cada sitio en el que quieras hacer un salto de línea.

Así es como debe lucir tu código HTML:

<h2>Yo soy mi casa</h2> <p> De mi esférica idea de las cosas,<br>parten mis inquietudes y mis males,<br> pues geométricamente, pienso iguales<br> lo grande y lo pequeño, porque siendo,<br> son de igual importancia; que existiendo,<br> sus tamaños no tienen proporciones,<br> pues no se miden por sus dimensiones<br>y solo cuentan, porque son totales,<br> aunque esféricamente desiguales.</p> <p>Me estoy volcando hacia fuera<br> y ahogándome estoy por dentro.<br>El mundo es solo una esfera,<br>y es al mundo al que pidiera<br>totalidad, que no encuentro.</p> <p><em>-Pita Amor</em></p>

Y este será el resultado:

Qué hacer si el salto de línea en HTML no está funcionando

Si la indicación <br> no está funcionando del modo esperado, es probable que sea porque no lo estás usando correctamente. Esto en realidad es muy común cuando se trabaja con editores de texto pertenecientes a plataformas CMS, como WordPress.

Es probable que quieras usar este elemento con fines de diseño, lo cual resultará en un fracaso debido a que <br> no ha sido ideado con ese propósito. Para eso será mejor que uses CSS.

Por ejemplo: ahora, quieres crear mas espacio entre bloques de texto u otros elementos. En lugar de usar la etiqueta <br> deberías usar elementos semánticos HTML acompañados de propiedades para márgenes o rellenos en CSS cuando sea necesario. 

De lo contrario, puede que te encuentres con estas limitaciones:

• Si usas un elemento <br> en HTML harás a tu código menos accesible, especialmente para quienes quieren consultar tus documentos en pantallas.
• Al usar <br> fuerzas el salto de línea por razones puramente visuales puedes hacer que tu contenido luzca bien en el navegador, pero puede presentar problemas en otros dispositivos.

De todo esto se pueden extraer algunas ventajas y desventajas en el uso de <br> para el salto de línea. Si bien es fácil de usar y no afectas la estructura de tu código, es probable que quieras usar otros métodos para llegar a los arreglos visuales que necesitas. 

Salto de línea en HTML sin <br>

Una buena estrategia para dar el acomodo adecuado a tus contenidos es usar otros métodos. Revisemos cuáles son los mejores.

Creación de márgenes y relleno

Una buena opción para mantener tu código HTML íntegro es creando los saltos de línea en CSS. De este modo, únicamente harás cambio de diseño, pero no a nivel estructural que pueda comprometer tus documentos.

Puedes usar márgenes y rellenos para crear separaciones entre diferentes líneas, reduciéndolos o aumentándolos a fin de crear el efecto de agrupación entre partes del texto. Así, puedes tener mayor control del espaciado y asegurar consistencia a lo largo de diferentes dispositivos.

Uso de elementos de bloque

En lugar de emplear el elemento <br>, puedes hacer uso de otras etiquetas que mantengan una mayor consistencia estructural en tu código. Por ejemplo, elementos como <p>, <div> o <section> pueden ayudarte a crear bloques o secciones de contenido definidas.

Estos elementos darán una mejor forma vertical a tu contenido. Así, podrás hacer las modificaciones necesarias de estilo en CSS sin afectar el texto.

Implementación de cajas flexibles

Si quieres hacer arreglos de información más complejos, la mejor opción es crear cajas flexibles en CSS. Con ellas, puedes definir un espacio dinámico y responsivo que se adecuará a cualquier dispositivo. Así es más seguro que habrá un espaciado y posicionamiento de elemento adecuado.

Si quieres evitar estos problemas de programación, también puedes emplear herramientas para el diseño web que automaticen procesos o, incluso, implementar el uso de un creador de sitios web para que tu sitio luzca espectacular.