La etiqueta HR se utiliza en documentos web para mostrar una línea horizontal a través de la página, o a veces llamada regla horizontal. A diferencia de algunas etiquetas, ésta no necesita una etiqueta de cierre, así que todo lo que tienes 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 contiene algunos atributos predeterminados para describir el grosor, la ubicación y el color de la línea, pero puede cambiar esos ajustes si lo desea.
Puede editar las características de la línea horizontal en un documento HTML5 editando el CSS de la página. Las líneas horizontales HTML4 se modificaron en el lado HTML del documento.
¿Es semántico el HR Tag?
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 era sólo una forma de añadir una simple línea a un documento donde lo desees. Estilizar sólo el borde superior o inferior del elemento en el que se desea que aparezca la línea colocó una línea horizontal en la parte superior o inferior del elemento, pero en general, la etiqueta HR era más fácil de usar para este propósito.
Comenzando con HTML5, la etiqueta HR se convirtió en semántica, y ahora define un salto temático a nivel de párrafo, que es un salto en el flujo del contenido que no justifica una nueva página 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 RRHH en HTML4 y HTML5
En HTML4, a la etiqueta HR se le pueden asignar atributos simples, incluyendo align, width, and noshade. La alineación puede ajustarse a left, center, right or justify. El ancho ajusta el ancho de la línea horizontal desde el 100 por ciento predeterminado que extiende la línea a través de la página. El atributo noshade atribuye una línea de color sólido en lugar de un color sombreado.
Estos atributos son obsoletos en HTML5. En su lugar, debería utilizar CSS para dar estilo a sus etiquetas de recursos humanos en documentos HTML5.
Este es un ejemplo HTML5 de cómo estilizar la línea horizontal para que tenga una altura de 10 píxeles usando CSS en línea (estilos insertados directamente en el documento junto con HTML):
Usando CSS en línea para estilizar HR.
Otra forma de estilizar las líneas horizontales en HTML5 es usar un archivo CSS separado y enlazarlo desde el documento HTML. En el archivo CSS, escribirías el estilo así:
Usando CSS externo para estilizar HR.
hr {
altura:10pxEl mismo efecto en HTML4 requiere que añada un atributo al contenido HTML. Cómo cambiar el tamaño de la línea horizontal con el atributo size:
Estilizar la etiqueta HR en HTML4.
Hay mucha más libertad en el diseño de líneas horizontales en CSS que en HTML.
Sólo los estilos width and height styles son consistentes en todos los navegadores, por lo que es posible que sea necesario realizar algunas pruebas y errores al utilizar otros estilos. El ancho por defecto es siempre el 100 por ciento del ancho de la página web o elemento padre. La altura por defecto de la regla es de dos píxeles.