<hr> en HTML5El elemento <hr> en HTML es una abreviatura de "horizontal rule" (regla horizontal) y se utiliza para crear una línea horizontal en una página web. Esta línea suele ser empleada para separar contenido o para crear una división visual entre secciones de una página.
<hr>En HTML5, el elemento <hr> viene con varios atributos globales que se pueden aplicar para darle estilos o definir comportamientos. Los atributos específicos del elemento <hr> han sido eliminados en HTML5, en favor de usar CSS para el diseño y estilo. Aquí hay un listado de atributos globales y otros relevantes que pueden aplicarse al <hr>:
class: Se usa para definir una o más clases (names) para el elemento. Se puede utilizar para aplicar estilos CSS específicos a través de clases definidas.
<hr class="separador">id: Proporciona un identificador único para el elemento, lo cual es útil para estilos CSS o referencias JavaScript.
<hr id="separador-principal">style: Se usa para aplicar atributos de estilo CSS en línea, permitiendo la personalización directa del elemento.
<hr style="border: 1px dashed #000;">title: Proporciona información adicional sobre el elemento, que se muestra como un tooltip (ayuda emergente) cuando el usuario pasa el cursor sobre el elemento.
<hr title="Esta es una línea separadora">lang: Declara el idioma del contenido del elemento.
<hr lang="en">*data-:** Atributos personalizados para almacenar datos privados en la página o aplicación.
<hr data-info="valor-custom"><hr> en HTML5El elemento <hr> se utiliza principalmente para crear una división temática y visual en el contenido de una página web. A continuación, se presentan ejemplos sencillos de uso:
<hr>Este es un ejemplo simple de cómo utilizar un <hr> en una página HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de HR</title>
</head>
<body>
<h1>Encabezado Principal</h1>
<p>Este es el primer párrafo de contenido.</p>
<hr>
<p>Este es el segundo párrafo de contenido, separado visualmente del primero por una línea horizontal.</p>
</body>
</html><hr> con estilos CSSEste ejemplo agrega estilos básicos al <hr> utilizando CSS para personalizar su apariencia:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de HR con CSS</title>
<style>
.dashed-line {
border: 0;
border-top: 1px dashed #007BFF;
height: 1px;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>Encabezado Principal</h1>
<p>Este es el primer párrafo de contenido.</p>
<hr class="dashed-line">
<p>Este es el segundo párrafo de contenido, separado visualmente del primero por una línea horizontal estilizada.</p>
</body>
</html>Este ejemplo muestra cómo usar el atributo data-* para almacenar información personalizada en el elemento <hr>:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de HR con atributos personalizados</title>
</head>
<body>
<h1>Encabezado Principal</h1>
<p>Este es el primer párrafo de contenido.</p>
<hr data-info="divisor-principal">
<p>Este es el segundo párrafo de contenido, separado del primero de manera semántica con un atributo personalizado en la línea horizontal.</p>
</body>
</html>En resumen, el elemento <hr> en HTML5 es una herramienta sencilla pero eficaz para organizar visualmente el contenido en una página web. Si bien no tiene atributos específicos en HTML5, se puede personalizar ampliamente usando atributos globales y estilos CSS.