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">

APRENDE SOBRE