El elemento de salto de línea hace que el navegador avance a la siguiente línea antes de mostrar el siguiente elemento o parte del texto en una página web. La etiqueta de salto de línea no está codificada como un par de etiquetas de apertura y cierre. Es un elemento independiente o vacío, y está codificado como <br>.

Etiqueta BR HTML con ejemplo
Etiqueta BR HTML con ejemplo

¿Qué es un Salto de Línea en HTML?

En HTML, el elemento <br> crea un salto de línea. Puedes añadirlo donde quieras que el texto termine en la línea actual y se reanude en la siguiente. El elemento HTML de salto de línea puede utilizarse para mostrar poemas, letras de canciones u otras formas de contenido en las que la división de las líneas es significativa para el significado o la apariencia del contenido.

Usos de la Etiqueta <br>

La etiqueta <br> rompe una línea de texto en el punto donde aparece. Cuando un navegador web encuentra una etiqueta <br>, reinicia el texto después de la etiqueta en el margen izquierdo (cualquiera que sea el margen izquierdo actual para el elemento actual).

Puedes utilizar <br> dentro de otros elementos, como párrafos o elementos de la lista; <br> no agregará espacio extra por encima o por debajo de la nueva línea ni cambiará la fuente o el estilo de la entidad actual. Todo lo que hace es reiniciar el texto en la siguiente línea.

Ejemplo:

<!DOCTYPE html>
<html>
<body>
<p>La primera línea de texto termina<br>
Y la segunda línea comienza.
</D>
</body>
</html>

El siguiente ejemplo muestra un párrafo simple en el que cada línea (excepto la última, que termina con una etiqueta <p> de cierre) termina con una <br>:

<p>tan bella eres <br>
tan bella seras <br>
por eso te quiero <br>
cada día mas </p>

El resultado:

tan bella eres
tan bella seras
por eso te quiero
cada día mas

Sabias que…

clear es un atributo obsoleto de la etiqueta <br>. Se usa con imágenes que tienen texto envuelto a su lado.

El Salto de Línea BR HTML no Funciona

Si el salto de línea o la etiqueta HTML <br> no funciona, especialmente si estás trabajando en el editor de texto de un CMS como WordPress, es posible que estés utilizando el elemento incorrectamente.

El mal uso más común de la etiqueta HTML de nueva línea es su uso con fines de presentación. Para prácticamente cualquier cosa relacionada con el diseño, debes usar CSS en su lugar.

Por ejemplo, digamos que deseas crear más espacio entre bloques de texto u otros elementos. En lugar de usar la etiqueta br, debes usar un elemento HTML semántico y el margen CSS o las propiedades de relleno si es necesario.

¿Por qué? Por dos razones.

  1. Utilizar el elemento HTML de salto de línea cuando existe un elemento más semántico hace que el código sea menos accesible, especialmente para los lectores de pantalla.
  2. Utilizar la etiqueta <br> para forzar un salto de línea con fines puramente de presentación puede quedar bien en tu navegador, pero no en otros navegadores o dispositivos, sobre todo si tu sitio es responsive. Un sitio responsive cambiará automáticamente el diseño en función del tamaño de la pantalla. Así que ya envolverá el texto cuando sea necesario y lo hará cuando llegue a una etiqueta <br>. El resultado son bloques de texto entrecortados y desiguales.

¡Deja tu comentario si tienes alguna duda!

5/5 - (7 votos)