Etiqueta HTML <hr>
La etiqueta HTML <hr> marca una ruptura temática. Aprende cuándo usarla, cómo aplicar estilos CSS, sus atributos y accesibilidad.
La etiqueta HTML <hr> representa una ruptura temática — un cambio de tema dentro de una sección de contenido, como un cambio de escena en una historia o un giro hacia un nuevo asunto dentro de un artículo de referencia. De forma predeterminada, el navegador la renderiza como una línea horizontal, pero su propósito principal es semántico, no decorativo.
En HTML5 la etiqueta <hr> tiene significado: informa a los navegadores y a las tecnologías de asistencia que los párrafos circundantes pertenecen a temas distintos. En versiones anteriores de HTML se trataba únicamente como una regla presentacional para dibujar una línea entre contenidos. Hoy, si solo deseas un divisor decorativo sin cambio de tema, deberías usar un borde CSS en otro elemento en lugar de un <hr>.
La apariencia visual de la línea depende del navegador; con frecuencia se dibuja con un ligero efecto 3D ("sombreado") que puedes sobrescribir con CSS.
Cuándo usar <hr> (y cuándo no)
Usa <hr> cuando haya un cambio real de tema:
- Entre dos secciones distintas de un artículo o documento largo.
- Entre escenas o cambios en una narrativa.
- Para separar grupos de campos de formulario o elementos de lista sin relación, cuando un nuevo encabezado resultaría demasiado pesado.
No uses <hr> únicamente con fines decorativos. Si la línea solo está ahí para verse bien — por ejemplo, un divisor debajo de cada avatar en una lista — añade ruido para los usuarios de lectores de pantalla. En ese caso, aplica un estilo de borde a un elemento existente, o añade role="presentation" a la regla para que sea ignorada semánticamente. Para estructurar regiones de la página por significado, consulta los elementos semánticos en HTML5.
Accesibilidad: <hr> tiene el rol ARIA implícito separator y se expone a las tecnologías de asistencia — muchos lectores de pantalla lo anuncian (por ejemplo, como "separador"). Eso es exactamente lo que se desea para una ruptura temática real, pero es la razón por la que una línea puramente decorativa debería usar CSS o role="presentation" en su lugar.
Sintaxis
La etiqueta <hr> está vacía, lo que significa que la etiqueta de cierre no es obligatoria. Pero en XHTML, la etiqueta (<hr>) debe cerrarse (<hr/>).
Ejemplo de la etiqueta HTML <hr>:
HTML hr tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Learn HTML</h1>
<p>
This HTML tutorial will teach you the basics of the (Hyper Text Markup Language) and how to make your website from scratch.
</p>
<hr />
<h1>Learn CSS</h1>
<p>
In our CSS tutorial you will learn how to use CSS to control the style and layout of multiple Web pages all at once.
</p>
</body>
</html>Atributo size de HTML <hr>
El atributo size especifica la altura de la línea.
Aunque el atributo size es uno de los atributos obsoletos, todavía es compatible con todos los navegadores.
Ejemplo de la etiqueta HTML <hr> con el atributo "size":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>A normal horizontal line:</p>
<hr />
<p>A horizontal line with a height of 40 pixels:</p>
<hr size="40" />
</body>
</html>Una forma alternativa de especificar el tamaño de la etiqueta <hr> es usando la propiedad CSS height.
Ejemplo de la etiqueta HTML <hr> usada con la propiedad height:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
height: 20px;
}
</style>
</head>
<body>
<p>
A horizontal line with a height of 20 pixels.
</p>
<hr />
</body>
</html>Atributo width de HTML <hr>
El atributo width especifica el ancho de la línea.
El atributo width también forma parte de la lista de atributos obsoletos, pero es compatible con todos los navegadores.
Ejemplo de la etiqueta HTML <hr> con el atributo width:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>A normal horizontal line:</p>
<hr />
<p>A horizontal line with a width of 30%:</p>
<hr width="30%" />
</body>
</html>Usa la propiedad CSS width en lugar del atributo width.
Ejemplo de la etiqueta HTML <hr> usada con la propiedad width:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
width: 250px;
}
</style>
</head>
<body>
<p>A horizontal line with a width of 250 pixels:</p>
<hr />
</body>
</html>Atributo noshade de HTML <hr>
El atributo noshade elimina el efecto de sombreado 3D de la línea horizontal.
El atributo noshade es uno de los atributos obsoletos, pero es compatible con todos los navegadores.
Ejemplo de la etiqueta HTML <hr> con el atributo noshade:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Shaded horizontal line :</p>
<hr />
<p>Noshaded horizontal line:</p>
<hr noshade />
</body>
</html>Para eliminar el aspecto 3D predeterminado ("sombreado") en CSS, dale a <hr> un borde plano y un fondo transparente. La regla predeterminada se dibuja usando bordes sombreados, por lo que reemplazarla con un único borde sólido (y limpiar el fondo) produce una línea plana y simple — el mismo resultado que daba el atributo noshade.
Ejemplo de la etiqueta HTML <hr> usada con la propiedad border:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
border: 1px solid #000000;
background: transparent;
}
</style>
</head>
<body>
<p>
A horizontal line specified with CSS border Property.
</p>
<hr />
</body>
</html>Atributo align de HTML
El atributo align especifica la alineación de la línea.
El atributo align es uno de los atributos obsoletos, pero es compatible con todos los navegadores.
Ejemplo de la etiqueta HTML <hr> con el atributo align:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Lorem ipsum is simply dummy text...</p>
<hr align="left" width="70%" />
</body>
</html>Para posicionar un <hr>, establece un width y controla su margin horizontal — no text-align. Como <hr> es un elemento de bloque, text-align no lo desplaza. Usa margin-right: auto para empujarlo a la izquierda, margin-left: auto para empujarlo a la derecha, o margin: 0 auto para centrarlo.
Ejemplo de la etiqueta HTML <hr> usada con la propiedad margin:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
width: 50%;
margin-left: 0;
margin-right: auto;
}
</style>
</head>
<body>
<p>A horizontal line specified with CSS margin property</p>
<hr />
</body>
</html>Los atributos de presentación de la etiqueta <hr> están obsoletos en HTML5. Para aplicar estilos, usamos CSS en su lugar.
Cómo aplicar estilos a la etiqueta <hr>
La propiedad CSS border se usa para estilizar la línea horizontal.
Ejemplo de la etiqueta HTML <hr> con estilo aplicado mediante la propiedad border:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
/* blue border */
hr.one {
border-top: 1px solid #1c87c9;
}
/* Dashed border */
hr.two {
border-top: 1px dashed #1c87c9;
}
/* Dotted border */
hr.three {
border-top: 1px dotted #1c87c9;
}
/* Thick border */
hr.four {
border: 1px solid #1c87c9;
}
/* Large rounded border */
hr.five {
border: 15px solid #1c87c9;
border-radius: 5px;
}
</style>
</head>
<body>
<p>Default:</p>
<hr />
<p>Styling "hr" tag</p>
<hr class="one" />
<hr class="two" />
<hr class="three" />
<hr class="four" />
<hr class="five" />
</body>
</html>Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| align | left center right | Define la alineación horizontal de una línea. Obsoleto en HTML5, pero aún compatible con los navegadores por razones de retrocompatibilidad. |
| noshade | noshade | Define que la línea se mostrará sin efecto 3D. Obsoleto en HTML5, pero aún compatible con los navegadores por razones de retrocompatibilidad. |
| size | pixels | Define el tamaño de una línea. Obsoleto en HTML5, pero aún compatible con los navegadores por razones de retrocompatibilidad. |
| width | pixels % | Define el ancho de una línea. Obsoleto en HTML5, pero aún compatible con los navegadores por razones de retrocompatibilidad. |
La etiqueta <hr> admite los Atributos Globales y los Atributos de Evento.