La etiqueta HR se usa en documentos web para mostrar una línea horizontal a través de la página, o algunas veces se llama una regla horizontal. A diferencia de algunas etiquetas, esta no necesita una etiqueta de cierre, por lo que todo lo que tiene que hacer es escribir para insertar la línea.
La línea se extiende a lo largo de todo el ancho de la página y lleva algunos atributos predeterminados para describir el grosor, la ubicación y el color de la línea, pero puede cambiar esa configuración si lo desea.
Puede editar las características de la línea horizontal en un documento HTML5 al editar el CSS de la página. Las líneas horizontales de HTML4 se cambiaron en el lado HTML del documento.
¿La etiqueta HR es semántica?
En HTML4, la etiqueta HR no era semántica. Los elementos semánticos describen su significado en términos que el navegador y el desarrollador pueden entender fácilmente. La etiqueta HR fue solo una forma de agregar una línea simple a un documento donde lo desee. Diseñando solo el borde superior o inferior del elemento donde desea que aparezca la línea, coloque una línea horizontal en la parte superior o inferior del elemento, pero en general, la etiqueta HR fue más fácil de usar para este propósito.
A partir de HTML5, la etiqueta HR se convirtió en semántica, y ahora define una ruptura temática a nivel de párrafo, que es una interrupción en el flujo del contenido que no garantiza una página nueva u otro delimitador más fuerte; es un cambio de tema. Por ejemplo, puede encontrar una etiqueta HR después de un cambio de escena en una historia, o puede indicar un cambio de tema en un documento de referencia.
Atributos de recursos humanos en HTML4 y HTML5
En HTML4, a la etiqueta HR se le pueden asignar atributos simples, incluidos alinear y sin sombra . La alineación se puede configurar para izquierda , centrar , Correcto o justificar . El ancho ajusta el ancho de la línea horizontal desde el 100% predeterminado que extiende la línea a través de la página. los sin sombra atributo representa una línea de color sólido en lugar de un color sombreado.
Estos atributos están obsoletos en HTML5. En su lugar, debe usar CSS para diseñar sus etiquetas de recursos humanos en documentos HTML5.
Este es un ejemplo de HTML5 de estilizar la línea horizontal para que tenga 10 píxeles de alto usando CSS en línea (estilos insertados directamente en el documento junto con HTML):
Otra forma de estilizar líneas horizontales en HTML5 es usar un archivo CSS separado y vincularlo desde el documento HTML. En el archivo CSS, escribirías el estilo así: hr {altura: 10px}
El mismo efecto en HTML4 requiere que agregue un atributo al contenido HTML. Aquí le mostramos cómo cambiar el tamaño de la línea horizontal con la tamaño atributo:
Hay mucha más libertad en el diseño de líneas horizontales en CSS en comparación con HTML. Solo el anchura y altura los estilos son consistentes en todos los navegadores, por lo que es posible que se necesiten algunos ensayos y errores al usar otros estilos. El ancho predeterminado es siempre el 100 por ciento del ancho de la página web o del elemento principal. La altura predeterminada de la regla es dos píxeles.
