Dominando los saltos de línea HTML

Introducción

En este laboratorio, aprenderás a usar la etiqueta HTML <br> para crear saltos de línea en una página web.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 100%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Crea un archivo HTML

Crea un nuevo archivo llamado index.html y agrega la estructura básica de HTML.

<!doctype html>
<html>
  <head>
    <title>Salto de línea con HTML</title>
  </head>
  <body></body>
</html>

Agrega texto a la página web

Agrega algo de texto al cuerpo de tu documento HTML.

<body>
  <h1>Bienvenido a mi página web!</h1>
  <p>
    Este es un poco de texto en mi página web. Quiero crear un salto de línea
    aquí:
  </p>
  <p>¿Pero cómo lo hago?</p>
</body>

Utiliza la etiqueta
para saltos de línea

Para agregar un salto de línea entre los dos párrafos de texto, agrega la etiqueta <br> después de la primera etiqueta de párrafo.

<body>
  <h1>Bienvenido a mi página web!</h1>
  <p>
    Este es un poco de texto en mi página web. Quiero crear un salto de línea
    aquí:
  </p>
  <br />
  <p>¿Pero cómo lo hago?</p>
</body>

Personaliza el espaciado de los saltos de línea con el margen de CSS

Para personalizar la cantidad de espacio que crea un salto de línea, puedes usar el margen de CSS. Agrega el siguiente código CSS a tu archivo HTML para crear 30px de espacio arriba y abajo de cada salto de línea.

<head>
  <title>Salto de línea con HTML</title>
  <style>
    br {
      margin-top: 30px;
      margin-bottom: 30px;
    }
  </style>
</head>

Guarda tu archivo index.html y ábrelo en un navegador web para ver el salto de línea que has creado.

Resumen

La etiqueta HTML <br> es una forma sencilla de crear saltos de línea en tu página web. úsala para agregar espacio entre párrafos de texto, o en cualquier otro lugar donde necesites romper una línea. Personalizar la cantidad de espacio creado por un salto de línea es fácil con el margen de CSS.

Salto de línea HTML