Etiqueta HTML <hr>
Ejemplo
Use la etiqueta <hr> para definir cambios temáticos en el contenido:
<h1>The Main Languages of the Web</h1>
<p>HTML is the standard markup
language for creating Web pages. HTML describes the structure of a Web page,
and consists of a series of elements. HTML elements tell the browser how to
display the content.</p>
<hr>
<p>CSS is a language that
describes how HTML elements are to be displayed on screen, paper, or in
other media. CSS saves a lot of work, because it can control the layout of
multiple web pages all at once.</p>
<hr>
<p>JavaScript is the
programming language of HTML and the Web. JavaScript can change HTML content
and attribute values. JavaScript can change CSS. JavaScript can hide and
show HTML elements, and more.</p>
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La <hr>etiqueta define una ruptura temática en una página HTML (por ejemplo, un cambio de tema).
El <hr>elemento suele mostrarse como una regla horizontal que se usa para separar el contenido (o definir un cambio) en una página HTML.
Compatibilidad con navegador
| Element | |||||
|---|---|---|---|---|---|
| <hr> | Yes | Yes | Yes | Yes | Yes |
Atributos globales
La <hr>etiqueta también es compatible con los atributos globales en HTML .
Atributos de eventos
La <hr>etiqueta también es compatible con los atributos de eventos en HTML .
Más ejemplos
Ejemplo
Alinee un elemento <hr> (con CSS):
<hr style="width:50%;text-align:left;margin-left:0">
Ejemplo
Un <hr> sombreado (con CSS):
<hr style="height:2px;border-width:0;color:gray;background-color:gray">
Ejemplo
Establecer la altura de un elemento <hr> (con CSS):
<hr style="height:30px">
Ejemplo
Establecer el ancho de un elemento <hr> (con CSS):
<hr style="width:50%">
páginas relacionadas
Referencia HTML DOM: Objeto HR
Configuración predeterminada de CSS
La mayoría de los navegadores mostrarán el <hr>elemento con los siguientes valores predeterminados:
Ejemplo
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}