Saltar una línea en HTML

Subodh Poudel 19 febrero 2023
  1. Use la etiqueta <p> para saltar una línea en HTML
  2. Utilice dos etiquetas <br> para omitir una línea en HTML
  3. Establezca la propiedad opacity de la etiqueta <hr> en 0 para saltar una línea en HTML
  4. Use la propiedad margin de CSS para omitir una línea en HTML
Saltar una línea en HTML

Este artículo explorará varias formas de omitir o agregar una línea en HTML.

Use la etiqueta <p> para saltar una línea en HTML

La forma más sencilla de saltar una línea en HTML es usando la etiqueta <p>. La etiqueta <p>, un elemento de párrafo, crea párrafos en HTML.

Los párrafos son elementos a nivel de bloque que representan un bloque de texto en un documento HTML. Siempre podemos encontrar una línea en blanco entre dos párrafos.

Así es como se pueden identificar dos párrafos. Una línea se salta automáticamente usando el elemento <p>.

Vamos a implementarlo en un ejemplo simple.

Primero, cree una etiqueta <p> y escriba un texto de su elección dentro de la etiqueta. A continuación, cree otra etiqueta <p> y escriba algunos contenidos de párrafo dentro de ella también.

El fragmento de código a continuación agrega una línea en blanco entre dos textos. Así es como podemos saltarnos una línea entre textos en HTML.

Código de ejemplo:

<p>
 The first paragraph
</p>
<p>
 The second paragraph
</p>

Utilice dos etiquetas <br> para omitir una línea en HTML

También podemos usar la etiqueta <br> para saltar una línea en HTML. El <br>, un elemento de salto de línea, rompe una sola línea.

Creará una línea en blanco cuando se use dos veces, ya que rompe dos líneas consecutivas. La etiqueta no tiene una etiqueta de cierre; se llama una etiqueta vacía.

Una aplicación de la etiqueta <br> es dirigir el texto a una nueva línea al escribir poemas.

Mira el ejemplo a continuación, donde hemos implementado la etiqueta <br> para saltar una línea entre dos estrofas de un poema. La etiqueta <br> al final de la primera línea rompe la línea y dirige a la siguiente línea.

Después de la segunda línea, hemos usado dos etiquetas <br>. El primero rompe la línea y se dirige a la tercera línea.

Luego, la segunda etiqueta <br> rompe la tercera línea y crea una línea en blanco. Después de eso, hemos escrito otra estrofa del poema usando una sola etiqueta <br> al final de cada línea.

Así, el ejemplo demuestra cómo podemos saltar una línea entre textos usando dos etiquetas <br>.

Código de ejemplo:

<p>
 got out of the bed at four, not seven<br>
 after meditation, it was like heaven<br>
 <br>
 kept myself up, coding till eleven<br>
 lately i've been doing Java, I 'll be using Maven
</p>

Establezca la propiedad opacity de la etiqueta <hr> en 0 para saltar una línea en HTML

Este método implementará un truco para saltar una línea en HTML. El truco está en usar la etiqueta <hr> y hacerla invisible.

La etiqueta <hr> crea una línea horizontal. Podemos establecer la propiedad opacity de CSS de la línea horizontal en 0.

Como resultado, el espacio ocupado por la línea horizontal se verá como una línea en blanco.

Por ejemplo, escriba un texto de su elección. Luego, crea una línea horizontal usando la etiqueta <hr>.

Aplicar estilos CSS de manera en línea con el atributo style. Establezca la propiedad opacity en 0. Después de <hr>, escribe otra línea.

Aquí, el valor 0 de la propiedad opacity hace que la línea horizontal sea completamente transparente. El valor 0 hace que el elemento sea completamente transparente y el valor 1 lo hace completamente opaco.

En consecuencia, el ejemplo demuestra cómo podemos omitir una línea entre textos usando la etiqueta <hr> y la propiedad opacity.

Código de ejemplo:

The line before blank line
<hr style="opacity:0">
The line after blank line

Use la propiedad margin de CSS para omitir una línea en HTML

Ahora, discutiremos el método final para saltar una línea en HTML usando la propiedad margin de CSS.

Podemos usar la etiqueta <section> para representar la sección del texto a escribir después de una línea omitida. Luego, podemos aplicar el margen en la parte superior de esa sección para que quede un espacio en blanco.

Por ejemplo, escriba un texto de su elección. A continuación, cree un elemento <sección> y escriba un texto dentro de él.

En CSS, seleccione el elemento section y establezca su propiedad margin en 1em 0. El valor 1em se asemeja al margen superior e inferior de la sección.

Como resultado, se creará un espacio en blanco con un tamaño equivalente al tamaño de la fuente en la parte superior e inferior del texto.

Así es como podemos usar la propiedad margin de CSS para crear una línea en blanco en HTML.

Código HTML:

This is the first line
<section>This is the line after the skipped line</section>

Código CSS:

section {
 margin: 1em 0;
}
Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn

Artículo relacionado - HTML Line