Cuando estamos creando una página web con HTML, en ocasiones necesitamos que una parte del texto aparezca en una línea diferente. Para conseguirlo existe una etiqueta específica que permite insertar un salto de línea HTML sin tener que comenzar un nuevo párrafo.
Aunque es una operación sencilla, conviene conocer la diferencia entre un salto de línea, un párrafo y un salto conseguido mediante CSS.
¿Qué es un salto de línea en HTML?
Un salto de línea hace que el contenido que aparece después se muestre en la siguiente línea, manteniéndolo dentro del mismo bloque de contenido.
La etiqueta utilizada habitualmente para conseguirlo es:
<br>
Por ejemplo:
<p>Primera línea<br>Segunda línea</p>
El navegador mostrará:
Primera línea
Segunda línea
La etiqueta <br> está definida en el estándar de HTML como un elemento que representa una interrupción de línea. Puedes consultar su funcionamiento en la documentación de MDN sobre <br>.
¿Para qué sirve la etiqueta <br>?
La etiqueta <br> resulta especialmente útil cuando necesitamos forzar una nueva línea dentro del mismo bloque de contenido.
Por ejemplo, puede utilizarse en una dirección:
<p>
Calle Mayor, 25<br>
28001 Madrid<br>
España
</p>
También puede resultar apropiada para determinados textos donde la separación entre líneas forma parte del contenido, como una dirección postal, una poesía o una letra de una canción.
<br> no es lo mismo que crear un párrafo
Una de las dudas más habituales consiste en confundir <br> con <p>.
La etiqueta <p> se utiliza para definir un párrafo, mientras que <br> únicamente introduce un salto de línea.
Por ejemplo:
<p>Este es un párrafo de texto.</p>
<p>Este es otro párrafo.</p>
Aquí tenemos dos bloques de contenido independientes.
En cambio:
<p>Primera línea<br>Segunda línea</p>
Tenemos un único párrafo que contiene dos líneas.
La especificación de HTML del W3C establece la estructura y el significado de los diferentes elementos que forman un documento HTML.
¿Se puede utilizar <br> varias veces?
Sí. Si necesitamos introducir más de un salto de línea podemos escribir:
<p>Texto arriba<br><br>Texto abajo</p>
Sin embargo, utilizar muchos <br> consecutivos para crear grandes espacios no suele ser una buena práctica.
Si lo que queremos es controlar la distancia entre elementos, normalmente es preferible utilizar CSS.
Cómo crear espacio entre elementos con CSS
HTML debería utilizarse principalmente para estructurar el contenido, mientras que CSS permite controlar su presentación.
Por ejemplo:
<p class="texto">Primer párrafo</p>
<p class="texto">Segundo párrafo</p>
Podemos añadir espacio entre ellos mediante CSS:
.texto {
margin-bottom: 20px;
}
De esta manera podemos modificar fácilmente la separación sin tener que añadir varios saltos de línea.
La documentación de MDN sobre CSS contiene información sobre propiedades como margin, padding y otras herramientas para controlar el diseño.
Salto de línea en HTML dentro de un texto
Supongamos que queremos mostrar una frase en dos líneas:
<p>
Aprende HTML<br>
de forma sencilla
</p>
El navegador interpretará <br> como una interrupción de línea y mostrará cada parte en una línea diferente.
Es importante recordar que escribir simplemente un salto de línea en el código fuente no siempre produce el mismo resultado visual. HTML normalmente trata los espacios y saltos de línea del código como espacios de separación.
Por eso, cuando queremos forzar una nueva línea, podemos utilizar <br>.
¿Es <br> o <br />?
Puedes encontrar las dos formas:
<br>
y:
<br />
En HTML moderno se utiliza habitualmente:
<br>
La segunda forma procede de la sintaxis utilizada en XHTML y también puede aparecer en muchos documentos y ejemplos antiguos.
¿Cuándo no deberíamos utilizar <br>?
No conviene utilizar <br> para construir el diseño general de una página.
Por ejemplo, esto no es recomendable:
<h1>Título</h1>
<br>
<br>
<br>
<p>Texto</p>
Si queremos separar visualmente el título del párrafo, es mejor utilizar CSS para controlar los márgenes.
Los saltos de línea tienen más sentido cuando el cambio de línea forma parte del propio contenido.
Ejemplo práctico
Una dirección puede representarse de esta manera:
<p>
Juan García<br>
Calle de Alcalá, 50<br>
28014 Madrid<br>
España
</p>
Mientras que para separar diferentes bloques de una página sería preferible utilizar elementos HTML independientes y CSS.
Esta distinción ayuda a crear páginas más limpias, fáciles de mantener y correctamente estructuradas.
En resumen
El salto de línea HTML se realiza normalmente mediante la etiqueta <br>. Sirve para obligar al navegador a continuar el contenido en la siguiente línea sin crear un nuevo párrafo.
La etiqueta es sencilla y muy útil para direcciones, poemas y otros contenidos donde el salto de línea forma parte de la información. Para crear espacios o controlar el diseño de una página, sin embargo, es preferible utilizar CSS.
Si estás empezando con HTML, entender la diferencia entre <br>, <p> y las propiedades de CSS te ayudará a crear páginas web mucho más ordenadas.
Productos recomendados
Seleccionados de nuestra tienda para este tema
Hasta -75%
Plafón LED de techo rectangular ultrafino de 23 pulgadas…
El precio original era: 263,92 €.65,98 €El precio actual es: 65,98 €.
Ver opciones
Te puede interesar
Bricolaje y jardín
Los 6 mejores accesorios para recoger hojas
Recoger hojas es una tarea inevitable en otoño y en cualquier periodo con árboles cerca de casa. Elegir los accesorios adecuados hace…
Leer artículo
Bricolaje y jardín
Los 6 mejores accesorios para reparar muebles de madera
Reparar muebles de madera en casa no solo ahorra dinero, sino que mantiene piezas con valor sentimental o estética. Para que la…
Leer artículo
Bricolaje y jardín
Los 6 mejores accesorios para tener herramientas básicas siempre localizadas
Tener las herramientas siempre localizadas no es solo una cuestión de orden: ahorra tiempo, reduce la frustración y evita compras duplicadas. Si…
Leer artículo
Leave a comment