Elemento hr en HTML

Elemento hr en html

El elemento html hr es una ruptura temática entre párrafos; por ejemplo, un cambio de escenario en una historia o un cambio de tema mediante la creación de una nueva sección.

En versiones anteriores de HTML, este elemento se mostraba como una línea horizontal y todavía se muestra en los navegadores, pero tiene un significado estructural, en lugar de solo un elemento formal.

Este ejemplo contiene dos párrafos (la etiqueta html <p>) separados por el elemento <hr> representado por una línea horizontal:

< p >
Contenido de texto ya sea del tipo párrafo. 
</ p >

< hr >

< p >
El otro contenido después del salto
</ p >

Etiqueta html hr

Clasificaciones de contenidoContenido organizacional.
Contenido permitidoNinguno, porque es un elemento vacío.
AcrónimoDebe tener una etiqueta de inicio y no debe tener una etiqueta de fin.
Elementos del padreCualquier elemento que acepte contenido normativo.
Interfaz DOMOHTMLHRElement.

Soporte de navegadores

ChromeFirefoxEdgeSafariÓpera
SoportadoSoportadoSoportadoSoportadoSoportado

Características

En este elemento se pueden utilizar propiedades globales.

Hay funciones que se utilizaron en versiones anteriores pero que no son compatibles con HTML5, como:

  • align: Ajusta la alineación de la línea horizontal en la página, el valor predeterminado es left.
  • size: Ajusta la altura de la línea horizontal en píxeles.
  • width: Establece la longitud de la línea horizontal en píxeles o como porcentaje.

No se recomienda utilizar las funciones anteriores en las páginas recientes porque se han descuidado, y las mencionamos aquí con fines informativos.

Formato de artículo

La mayoría de los navegadores muestran el elemento <hr>con la propiedad de configuración display para block, con la adición de márgenes : margin-topmargin-bottommargin-leftmargin-right, y el marco border-styleborder-width.

hr {
  display: block;
  margin-top: 0.7em;
  margin-bottom: 0.7em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}