HTML hr
Descripción
La etiqueta HTML hr (<hr>) define un corte temático en una página HTML (es decir un cambio de tema).
El elemento <hr> se muestra más frecuentemente como una regla horizontal, la cual se utiliza para separar contenidos diferentes (definición de un cambio) en una página HTML.
La etiqueta <hr> está soportada en todos los buscadores estándar.
Atributos
La etiqueta <hr> soporta los atributos globales en HTML y también los atributos de evento en HTML.
Configuración CSS predeterminada
En la Internet, los buscadores visualizan el elemento <hr> con los siguientes valores predeterminados:
hr { display: block; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; border-style: inset; border-width: 1px; }
Ejemplos de uso
Algunos de los ejemplos que puedes encontrar son los que siguen.
Ejemplo 1
Este ejemplo general describe la utilización en términos generales:
<h1>Los lenguajes principales de la Internet</h1> <p>HTML es el lenguaje estándar de marcado con etiquetas, utilizado para la creación de páginas Web. HTML describe la estructura de una página en Internet, y consiste en una serie de elementos. Los HTML le indican al buscador cómo mostrar el contenido.</p> <hr> <p>CSS es un lenguaje que describe cómo se visualizarán los elementos HTML sobre la pantalla o en otros medios de CSS, y le ahorra trabajo, ya que puede controlar a la vez el arreglo de página múltiples.</p> <hr> <p>JavaScript es el lenguaje de programación HTML y de la Internet, así como cambiar el contenido HTML y los valores atribuibles. JavaScript puede modificar el CSS, a la par que ocultar y mostrar los elementos HTML, además de otras opciones.</p>
Ejemplo 2
Alineación de un elemento <hr> (con CSS):
<hr style="ancho:50%;alineación-texto:izquierda;margen-izquierdo:0">
Ejemplo 3
Ajuste de la altura de un elemento <hr> (con CSS):
<hr style="alto:30px">
Ejemplo 4
Ajuste del ancho de un elemento <hr> (con CSS):
<hr style="ancho:50%">
Ejemplo 5
Un sombreado <hr> (con CSS):
<hr style="alto:2px;margen-ancho:0;color:gris;fondo-color:gris">