Las líneas horizontales son elementos que se utilizan para definir cambios temáticos en el contenido de un documento HTML. Este elemento también es conocido como separador horizontal. Se utiliza la etiqueta <hr> y no tiene etiqueta de cierre, tal y como sucede con los elementos clasificados como elementos vacíos.
Código de ejemplo de una línea horizontal:
<p>Párrafo de un tema.</p>
<hr>
<p>Párrafo de otro tema.</p>
El código de arriba se verá así:
Párrafo de un tema.
Párrafo de otro tema.
Tal y como se puede ver, aparece una línea entre los dos párrafos. En este caso la tenemos estilizada con línea discontinua y de color gris claro. Esto es posible gracias al potencial que ofrece la combinación del HTML y el CSS. Existen muchas maneras de decorar las líneas horizontales con CSS de forma elegante.
Las líneas horizontales (<hr>) son elementos de bloque. Esto significa que empiezan en una línea nueva ocupando todo el ancho posible. La anchura de este elemento queda delimitada hasta encontrar el límite del elemento superior que lo contiene, en la estructura del documento HTML.
Al igual que sucede con la mayoría de elementos vacíos que tienen una sola etiqueta de apertura y que carecen de etiqueta de cierre, si se usa XHTML o XML se cierran con </hr> en vez de <hr>. Pero en las versiones recientes de HTML es suficiente usando <hr> a secas.
Normas de uso
Las líneas horizontales tienen una única etiqueta de apertura, por lo que no debe usarse etiqueta de cierre. El uso de </hr> es incorrecto. Lo que sí puede hacerse es cerrarla usando <hr/>, sobre todo en documentos XHTML o XML.
Atributos del salto de línea
En versiones anteriores de HTML existían varios atributos específicos para este elemento, pero ya están desaconsejados. Estos atributos eran: width para definir el ancho de la línea horizontal, align para alinearla, size para indicar el tamaño y noshade para indicar si es una línea plana o con estilo 3D.
