HTML: Saltos de línea

Los saltos de línea son elementos que permiten insertar una línea nueva (retorno de carro), por ejemplo, dentro de un mismo párrafo. Es un elemento muy útil cuando se necesita organizar la información en varias líneas, como sería el caso de un poema o una dirección postal. Se utiliza la etiqueta <br> y no tiene etiqueta de cierre, por lo que es un elemento clasificado como elemento vacío (void element).

Ejemplo de un salto de línea en HTML:

<p>Recursivos:<br> Ciencia computacional</p>

El código de arriba se verá así:

Recursivos:
Ciencia computacional

Este elemento que tiene una única etiqueta de apertura se suele cerrar cuando se usa XHTML o XML, de modo que en estos casos se usa <br/> en vez de <br>. Pero tanto en HTML 4.01 como en el caso del HTML5, <br> es suficiente.

Normas de uso

A menudo se utiliza el salto de línea para incrementar el espacio entre líneas de texto, y en general es una mala práctica. La forma correcta de incrementar el espacio entre objetos es usando las hojas de estilo CSS, concretamente la propiedad margin, ya que permite modificar el margen visual entre elementos.

Como ya se ha dicho, este elemento tiene una única etiqueta de apertura, con lo que no debe tener etiqueta de cierre. Estos significa que el uso de </br> es totalmente incorrecto. Sin embargo, se puede cerrar a sí mismo usando <br/> pero no es necesario en documentos HTML. En resumen: no se debe usar <br></br>.

Atributos del salto de línea

El atributo clear ya no es válido en HTML, y en su lugar se utiliza la propiedad clear de las hojas de estilo CSS. Esta propiedad CSS se utiliza para definir si un elemento puede o no estar al lado de elementos flotantes (propiedad float) que lo preceden, o si debe estar situado (cleared) por debajo de ellos.

Oportunidad de salto de línea: elemento <wbr>

Con el elemento <wbr> podemos crear una oportunidad de salto de línea. Este elemento es de utilidad para crear un salto de línea de forma opcional, de modo que el navegador web hará el salto de línea sólo en caso de que la palabra no quepa en el contenedor; la palabra se verá dividida.

En el siguiente ejemplo escribimos una URL ficticia con varios saltos de línea opcionales en sus distintos niveles de página.

<p>https://example.com/<wbr>categoria/<wbr>pagina/<wbr>categoria/<wbr>pagina/<wbr>categoria/<wbr>pagina/<wbr>categoria/<wbr>pagina/<wbr>categoria/<wbr>pagina/</p>

Dando como resultado:

https://example.com/categoria/pagina/categoria/pagina/categoria/pagina/categoria/pagina/categoria/pagina/

Tal y como se puede ver en el ejemplo anterior, el navegador ha hecho el salto de línea de forma opcional en uno de los puntos que le hemos indicado.

← Artículo anterior
HTML: Párrafos
Artículo siguiente →
HTML: Líneas horizontales