Etiqueta hr en HTML: separación temática del contenido

La etiqueta <hr> representa un cambio de tema entre bloques de contenido y suele dibujarse como una línea horizontal. Sirve, por ejemplo, para indicar que un relato pasa a otra escena o a otro momento. Úsala cuando esa separación tenga significado en la lectura; para adornar una tarjeta con una línea, basta un borde de CSS.

Ejemplo mínimo: un cambio temporal

<p>Terminó la primera jornada.</p>
<hr>
<p>Una semana después, comenzó el siguiente taller.</p>

Verás dos párrafos con una línea entre ellos, según los estilos del navegador. Además de esa apariencia, el HTML expresa una separación temática: el segundo párrafo comienza otro momento del relato.

Para probarlo, coloca el fragmento dentro del <body> del documento completo del caso práctico, sustituyendo su contenido. No necesita archivos adicionales. Si retiras <hr>, los dos párrafos permanecen, pero desaparecen el separador y su representación visual; la frase «Una semana después» sigue explicando el salto temporal.

Sintaxis y contexto válido

Escribe <hr> entre los bloques que quieras separar. Es un elemento vacío: no admite contenido ni etiqueta de cierre. No escribas </hr>. La forma <hr /> se admite en HTML, pero la barra no añade ninguna función; estas reglas están en la sintaxis de elementos vacíos del estándar.

Pertenece al contenido de flujo y puede aparecer dentro de un <article>, <main>, <section> o <body>. No lo envuelvas en un <p>: este admite contenido de frase, y <hr> debe quedar entre los párrafos. Tampoco puede ser hijo directo de una lista <ul>.

El HTML Living Standard define su significado y contexto. También contempla un uso particular como separador de opciones en <select>; los ejemplos de esta guía se centran en el contenido de una lectura.

Cambio de tema o línea decorativa

Imagina que un relato describe cómo Ana cierra la biblioteca y, después de una separación, continúa con su regreso un mes más tarde. <hr> permite señalar esa transición dentro del mismo relato, sin inventar un título para cada escena.

En cambio, una ficha de préstamo puede tener un borde exterior y una línea sobre la fecha de devolución. Esa línea organiza la presentación de datos que siguen perteneciendo a la misma ficha. Aplica border o border-top al elemento existente, sin añadir un separador temático. MDN explica esta diferencia entre significado y presentación.

Si cada parte tiene un tema propio y un encabezado, considera organizarla con <section>. Las secciones y sus títulos ya expresan cambios temáticos: no necesitan un <hr> entre todas ellas. El separador tampoco crea un encabezado ni cambia la jerarquía del documento.

Caso práctico: relato y tarjeta de préstamo

Guarda este documento como relato.html, con codificación UTF-8, y ábrelo en un navegador. Incluye todo el CSS necesario y funciona sin JavaScript, imágenes ni servidor.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>La biblioteca vuelve a abrir</title>
    <style>
      body {
        box-sizing: border-box;
        max-width: 40rem;
        margin: 2rem auto;
        padding: 0 1rem;
        font-family: sans-serif;
        line-height: 1.6;
        color: #243240;
      }

      .relato hr {
        border: 0;
        border-top: 1px solid #7a8795;
        width: 60%;
        margin: 2rem auto;
      }

      .tarjeta {
        margin: 2rem 0;
        padding: 1rem;
        border: 1px solid #7a8795;
      }

      .tarjeta .nota {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #7a8795;
      }
    </style>
  </head>
  <body>
    <main>
      <article class="relato">
        <h1>La biblioteca vuelve a abrir</h1>
        <p>Ana guardó el último libro en una caja y cerró la biblioteca.
          Las obras comenzarían a la mañana siguiente.</p>
        <hr>
        <p>Un mes después, Ana volvió con la misma llave. Al abrir,
          encontró las estanterías listas y una mesa de lectura junto
          a la ventana.</p>
      </article>

      <aside class="tarjeta">
        <h2>Tu préstamo</h2>
        <p>Libro: Historias del barrio.</p>
        <p class="nota">Devuélvelo antes del viernes.</p>
      </aside>
    </main>
  </body>
</html>

El relato muestra una línea fina y centrada entre sus dos escenas. Debajo aparece una tarjeta enmarcada, con otra línea sobre la devolución. Solo la del relato corresponde a <hr>; la de la tarjeta pertenece al borde superior del párrafo .nota.

Prueba estos cambios por separado:

1. Cambia width: 60% a width: 100%. La línea del relato ocupará todo el ancho disponible; el cambio temporal seguirá siendo el mismo.
2. Cambia margin: 2rem auto a margin: 3rem auto en .relato hr. Aumentará el espacio alrededor del separador sin añadir párrafos.
3. Retira <hr>. Los dos fragmentos seguirán legibles, pero dejará de existir el separador semántico. La tarjeta conservará sus bordes.
4. Elimina el border-top de .tarjeta .nota. Desaparecerá esa línea decorativa; la fecha de devolución y la estructura del relato permanecerán.

Personalizar hr con CSS

En el ejemplo, border: 0 elimina los bordes predeterminados antes de dibujar uno superior con border-top. Su grosor, estilo y color están expresados en 1px solid #7a8795. Estas son propiedades de bordes CSS.

width controla el ancho; el porcentaje se calcula respecto al bloque contenedor. margin regula el espacio exterior, y los márgenes laterales auto centran la línea en este diseño. Consulta las definiciones de ancho y márgenes. Cambiar estas propiedades modifica la apariencia, no el significado de <hr>.

Atributos y accesibilidad

<hr> no tiene atributos específicos vigentes. Admite globales como class, id y style. Los antiguos size, width, color, align y noshade son atributos obsoletos; utiliza CSS para el aspecto de ejemplos nuevos.

En una lectura, <hr> tiene el papel accesible de separador, recogido en HTML AAM. No necesita role="separator" ni recibir foco con tabindex. La forma de anunciarlo puede variar según navegador y lector de pantalla. Mantén comprensible la transición en el texto, como «Un mes después», sin depender solo de la línea.

Preguntas frecuentes y errores

¿Hr sirve solo para dibujar una línea horizontal? No. Expresa una separación temática. Si el objetivo es decorar un bloque, aplica un borde CSS, como en la tarjeta.

¿Hr se cierra? No: es un elemento vacío. Escribe <hr> sin cierre y sin contenido dentro.

¿Puede sustituir a br o p? Cada elemento resuelve algo distinto: <br> introduce un salto de línea dentro de un texto; <p> marca un párrafo; <hr> separa temas o escenas. Evita añadirlo después de cada párrafo por costumbre. Para aumentar la distancia entre párrafos del mismo tema, ajusta sus márgenes.

Compatibilidad y fuentes

Consultado el 5 de octubre de 2026: <hr> está ampliamente disponible en los navegadores actuales, según la referencia y los datos de compatibilidad de MDN. Los ejemplos usan el separador entre bloques y CSS habitual; no requieren APIs ni funciones experimentales.