Qué Etiqueta Utilizamos Para Insertar Una Línea Horizontal

Para insertar una línea horizontal en HTML, usamos una etiqueta muy sencilla.

Aquí te explico paso a paso cómo hacerlo.

Paso 1: Identificar el lugar

Primero, identifica el lugar exacto en tu código HTML donde quieres que aparezca la línea. Piensa dónde quieres separar el contenido visualmente. Este puede ser entre párrafos, secciones o divs.

Por ejemplo, imagina que tienes este código:

<p>Este es el primer párrafo.</p>
<p>Este es el segundo párrafo.</p>

Y quieres poner la línea entre estos dos párrafos.

Paso 2: Insertar la etiqueta

Ahora, inserta la etiqueta correcta en ese lugar. La etiqueta que necesitas es <hr>. Esta etiqueta es una etiqueta vacía, lo que significa que no necesita una etiqueta de cierre.

Simplemente la colocas donde quieres que aparezca la línea. Así:

<p>Este es el primer párrafo.</p>
<hr>
<p>Este es el segundo párrafo.</p>

El código anterior insertará una línea horizontal entre los dos párrafos.

Paso 3: Guardar y visualizar

Guarda tu archivo HTML. Luego, ábrelo en tu navegador web. Verás la línea horizontal separando los párrafos.

Si no ves la línea, verifica que guardaste los cambios en el archivo HTML. Asegúrate también de que no haya errores de sintaxis en tu código.

Opciones de estilo

Por defecto, la línea horizontal tiene un estilo muy básico. Pero puedes cambiar su apariencia usando CSS. Puedes modificar su grosor, color y estilo.

Por ejemplo, para cambiar el color, puedes usar un estilo en línea:

<hr style="border: 1px solid red;">

Este código hará que la línea sea roja y tenga un grosor de 1 píxel.

También puedes usar clases CSS para aplicar estilos de manera más consistente. Primero, defines la clase en tu archivo CSS:

.linea-decorativa {
  border: 2px dashed blue;
  width: 50%;
}

Luego, aplicas la clase a tu etiqueta <hr>:

<hr class="linea-decorativa">

Esto creará una línea azul discontinua que ocupa el 50% del ancho del contenedor.

Consideraciones finales

La etiqueta <hr> es una forma sencilla de añadir separación visual en tu página web. Úsala para organizar tu contenido y mejorar la legibilidad. Recuerda que puedes personalizar su apariencia con CSS para que coincida con el estilo de tu sitio web.

Es importante recordar que, aunque es útil para la presentación, no debe utilizarse como el único método para estructurar el contenido semánticamente. Considera usar otras etiquetas HTML5 como <article>, <section>, y <aside> para definir la estructura lógica de tu documento.

¡Practica con diferentes estilos y opciones para ver qué funciona mejor para ti!