Salto de línea HTML

Realizando una página web, a todos nos ha tentado el partir una frase para presentarla en dos líneas diferentes. Para ello tenemos una etiqueta propia de HTML que se encarga de crear un salto de línea, sin embargo, no siempre es la mejor opción. Te hablamos de esta etiqueta y sus alternativas.

Br HTML

Qué es <br>

Es una etiqueta específica de HTML que permite realizar un salto de línea. La etiqueta proviene de «break» (line break). Es una etiqueta sin cierre, la ruptura de la línea se crea allí donde se encuentra la etiqueta.

Para qué sirve el br en HTML

Parece que está claro que la función de esta etiqueta es romper la línea y continuar escribiendo abajo. Así es, pero esto suele llevar a un uso abusivo de esta etiqueta que presenta problemas de comprensión para los robots y algoritmos. Hay casos donde puede tener su sentido, por ejemplo para escribir la dirección postal en el footer, separando las líneas como si de un poema se tratara. Otras veces, cuando los criterios son estéticos, no es la mejor opción.

Cómo usar <br>

Lo usemos correcta o incorrectamente, hay un error en el que solemos caer y que tenemos que tener en cuenta para usar esta etiqueta.

Lo veremos bien con un caso práctico. Si tenemos una página con e siguiente encabezado…

<h2>Cómo usar un salto<br>de línea</h2>

En la página se mostrará en dos líneas diferenciadas.

Sin embargo los resultados de Google omiten las etiquetas HTML, por lo que, no solo no aparecerá como H2, tampoco se mostrará el br, lo que lo dejaría «Cómo usar un saltode línea», juntando la última palabra de la primera línea y la primera de la segunda.

Este problema lo evitaríamos fácil añadiendo un espacio vacío antes de <br>. Una solución sencilla pero, como decimos, solemos pasar por alto.

Vamos a ver un ejemplo de cómo usar bien la etiqueta br. Hablábamos antes de los poemas, aquí usamos br para dar forma a un extracto de uno de Miguel Hernández:

<h2>CANCIÓN ÚLTIMA<h2>
<p>Pintada, no vacía: <br>
pintada está mi casa <br>
del color de las grandes <br>
pasiones y desgracias.</p>
<p>Regresará del llanto <br>
adonde fue llevada <br>
con su desierta mesa, <br>
con su ruinosa cama.</p>

Quedaría de la siguiente manera:

Pintada, no vacía:
pintada está mi casa
del color de las grandes
pasiones y desgracias.

Regresará del llanto
adonde fue llevada
con su desierta mesa,
con su ruinosa cama.

Nótese que se han mantenido espacios antes de las etiquetas br para que, cuando el texto se muestre corrido, su sintaxis sea correcta. Por otro lado se puede ver cómo los párrafos dan unidad a los bloques de cuatro líneas, separadas cada una por el br.

HTML salto de linea sin br

Salto de línea con etiqueta p

Una alternativa muy habitual es envolver cada línea con una etiqueta <p>. A veces incluso sin darnos cuenta: Si usas WordPress sabrás que tiene una función, el famoso «auto p» de WordPress, que asigna etiquetas de párrafo a cada salto de línea que puede. Para mi gusto una función de lo más molesta.

<p>Cómo usar un salto</p>
<p>de línea</p>

Si conoces algo de HTML sabrás que esta etiqueta es la etiqueta de párrafo. Aquí se plantea un problema visual, ya que los párrafos se suelen presentar con un espacio por la parte baja que lo separa del siguiente contenido, y no suele ser el aspecto que deseamos cuando pensamos en <br>. En el ejemplo del poema, mostrado más arriba, puedes ver las diferencias de ambas etiquetas conviviendo.

Salto de línea con etiqueta div

Podemos encerrar las diferentes líneas en otros elementos de bloque, como un div. Esta no es una solución que me guste demasiado, puede ser que en algún caso tenga su sentido, pero puede ser una alternativa peor que la original. Me explico: normalmente las líneas van a pertenecer a un conjunto, sea una frase larga o un elemento de un listado o numeración. El encerrarlos en contenedores diferentes le separan de sus hermanos y les priva de esa unidad.

<div>Cómo usar un salto</div>
<div>de línea</div>

Salto de línea por CSS

Hay que recordar que las etiquetas HTML tienen un significado semántico y no se deberían usar para dar aspectos visuales. Para eso tenemos el CSS. Por ello, si lo que quieres es crear dos líneas por un criterio estético, te recomendamos usar la etiqueta span que, aunque es un elemento de línea, podemos convertirlo en bloque a través del CSS.

En nuestro ejemplo quedaría tal que así:

<style>
    .bloque{display:block}
</style>

<span class="bloque">Cómo usar un salto</span> <span class="bloque">de línea</span>

Al ser dos elementos span independientes, además, podemos darles estilos diferentes, por ejemplo dándole un color más llamativo al primero de ellos, cosa que con <br> no podíamos, al pertenecer todo al mismo elemento.

Conclusión: Cómo hacer un salto de línea en HTML

La etiqueta br es muy cómoda y fácil de usar, pero te animamos a no usarla ;). Tampoco es que haya que desterrarla por siempre de nuestro temario de programación, pero te invitamos a limitarla solo a temas de contenido y, cuando se trate de razones estéticas, usar alternativas como la última planteada, con CSS y span.