Saltos de línea en HTML

Una de las cosas que tenemos que saber sobre los saltos de línea en HTML es que cuando la gente empieza a crear páginas web HTML suele caer en el error de creer que el retorno de carro sobre el editor va a provocar el mismo efecto cuando se visualice la página. Pero, esto no es cierto y deberemos de apoyarnos en el lenguaje HTML y sus elementos para conseguir dicho efecto.

Si lo que hacemos el codificar nuestra página de la forma que sigue, de tal manera que solo insertemos simples saltos de carro de texto:

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Saltos de línea</title>
</head>
<body>
Primera línea

Segunda línea
</body>
</html>

Podemos ver que el resultado no es el que realmente esperamos. Es decir, que no vamos a tener dos líneas entre la primera y la segunda línea.

El resultado cuando lo carguemos en el navegador será el siguiente:

Primera línea Segunda línea

Es decir, no hay salto alguno entre la primera y segunda línea. Aunque hayamos insertado los retornos de carro.

Para poder conseguir el efecto buscado deberemos de utilizar el elemento br. Este es el que se conoce como elemento «break». Es decir, cada elemento br que utilicemos generará un salto de línea.

Es por ello que el código anterior nos quedaría de la siguiente forma:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Saltos de línea</title>
</head>
<body> Primera línea
<br><br>
Segunda línea
</body>
</html>

Vemos que podemos poner las etiquetas seguidas. No hace falta que estén en una nueva línea. En este caso obtendremos el efecto deseado.

Primera línea


Segunda línea

Hay que tener en cuenta que el elemento br nos sirve para poder crear saltos de línea y separar las frases de texto. Pero nunca deberemos de utilizar el elemento br para crear separaciones entre elementos. Para poder crear separaciones entre elementos deberemos de utilizar las propiedades margin de CSS.

De esta forma ya habremos aprendido en este artículo a utilizar el elemento br para poder insertar dentro de nuestras páginas web saltos de línea en HTML. Esperamos que os haya sido útil.

Twittear

0 Compartir