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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/TextContentandFormattingGroup -.-> html/para_br("Paragraphs and Line Breaks") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") subgraph Lab Skills html/basic_elems -.-> lab-70715{{"Salto de línea HTML"}} html/head_elems -.-> lab-70715{{"Salto de línea HTML"}} html/text_head -.-> lab-70715{{"Salto de línea HTML"}} html/para_br -.-> lab-70715{{"Salto de línea HTML"}} html/doc_flow -.-> lab-70715{{"Salto de línea HTML"}} end

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>

Usa la etiqueta `<br>` 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