¡Hola!👋 Hoy vamos a hablar de una etiqueta muy útil en HTML: la etiqueta <hr>. 🖋️ Esta etiqueta sirve para crear una línea horizontal en la página, que ayuda a separar contenido y hacer que se vea más ordenado. 📄
📖 La etiqueta <hr> se usa para poner una línea horizontal en tu página web. Es como dibujar una línea en tu cuaderno para dividir temas. 🗂️ Ayuda a que el contenido se vea más organizado y a separar secciones de texto. ✍️
🧩 La etiqueta <hr> es un elemento en bloque. Esto significa que ocupa todo el ancho disponible y siempre empieza en una nueva línea. 📋
💡 Aunque la etiqueta <hr> es solo una línea, puedes hacer que se vea diferente usando "atributos". Los atributos son como ajustes especiales que puedes darle para cambiar su apariencia. ✨ Aquí te muestro algunos:
🎨 Este atributo permite cambiar el estilo de la línea directamente. Puedes hacerla más gruesa, cambiarle el color, o hacerla más corta. 🖌️
<hr style="border: 1px solid blue; width: 50%;">
✅ En este ejemplo, la línea <hr> es de color azul y ocupa solo la mitad de la página.
📋 Con este atributo, puedes darle un estilo especial usando CSS. Así puedes aplicar el mismo estilo a varias líneas <hr> si les pones la misma clase.
<hr class="linea-chula">
🧩 Si quieres que esta línea sea única o necesitas acceder a ella con JavaScript, puedes darle un nombre con el atributo id. 🖋️
<hr id="linea-unica">
📚 Aquí tienes algunos ejemplos para ver cómo usar <hr> y sus atributos:
<hr>
📄 Esta es la forma más simple de usar <hr>. Es solo una línea básica que separa el contenido.
<hr style="border: 2px dotted red; width: 75%;">
✨ En este caso, la línea es punteada, roja, y ocupa el 75% de la página. ¡Así se ve mucho más interesante! 🌟
<hr class="separador-cool" id="linea-principal">
🧠 La etiqueta <hr> es muy útil para hacer que tu página se vea ordenada, porque separa las secciones. Con los atributos como style, class, e id, puedes personalizar cómo se ve la línea. ✨
🌟 ¡Es una herramienta genial para hacer que tu web sea única y fácil de leer! 💻