Comprendiendo la etiqueta <hr> de HTML

HTML, el lenguaje de marcado que se utiliza para estructurar contenido en la web, tiene varias etiquetas que facilitan el diseño y la organización del contenido de una página web. Una de estas etiquetas es <hr>, que se utiliza para insertar una línea horizontal en una página web para representar una separación temática entre los contenidos de la página.

¿Qué es la etiqueta <hr>?

La etiqueta <hr> de HTML (que significa "horizontal rule") es una etiqueta que crea una línea horizontal. Se utiliza principalmente para representar una separación temática entre los párrafos del contenido.

Cómo usar <hr>

La etiqueta <hr> es una etiqueta de autocierre, lo que significa que no necesita una etiqueta de cierre. Aquí se muestra cómo se usa en el código HTML:

<p>Este es un párrafo de texto.</p>
<hr>
<p>Aquí está otro párrafo de texto, separado del primero por una línea horizontal.</p>

Personalizando <hr> con CSS

Por defecto, <hr> produce una línea horizontal en toda la página. Sin embargo, puedes utilizar CSS para personalizar la apariencia de <hr>. Por ejemplo, puedes cambiar el color, la altura, el ancho y el estilo de la línea. Aquí se muestra cómo:

<style>
hr {
    border: none;
    height: 2px;
    color: #333;
    background-color: #333;
    width: 50%;
}
</style>
<p>Este es un párrafo de texto.</p>
<hr>
<p>Aquí está otro párrafo de texto, separado del primero por una línea horizontal personalizada.</p>

En este ejemplo, hemos creado una línea horizontal que es negra (#333), tiene una altura de 2px, y ocupa el 50% del ancho total de su contenedor.