<hr>
Texto y contenido
Void element que marca una transición temática en el contenido. Es un separador semántico, no una línea decorativa.
<hr> es un void element que marca una transición temática en el contenido: “lo que venía antes y lo que viene después son cosas distintas”. En HTML5, su nombre informal pasó de “Horizontal Rule” (la línea) a “Thematic Break” (la pausa temática), y ese cambio de nombre resume todo: no es una línea decorativa, es un separador semántico.
El navegador lo renderiza como una línea horizontal por defecto, pero ese estilo es completamente modificable con CSS. Lo que no es modificable es el significado: <hr> le comunica a los lectores de pantalla (que lo anuncian como “separador”) y a los motores de búsqueda que hay un cambio de tema. Un <div> con border-top puede verse idéntico en pantalla, pero no tiene esa semántica.
Cuándo corresponde: un cambio de tema narrativo en un artículo, el cierre de un capítulo en un relato, la separación entre el poema y la ficha del autor, el paso de introducción a conclusión. Cuándo no corresponde: separar secciones que ya tienen sus propios headings (para eso están los márgenes CSS), o agregar líneas decorativas sin cambio de tema.
Cómo funciona
<hr> es un elemento de bloque: ocupa toda la anchura disponible y genera saltos de línea antes y después. Semánticamente, le comunica al agente de usuario (navegador, lector de pantalla, motor de búsqueda) que hay un cambio de tema o de sección en el contenido.
El estilo visual por defecto varía entre navegadores (suele ser una línea gris con borde tridimensional), pero se puede controlar completamente con CSS: color, grosor, estilo de borde, margen.
Modelo de contenido
<hr> no tiene contenido. Es válido en contextos de flujo: dentro de <body>, <section>, <article>, <blockquote>, <li>, <td>. No va dentro de elementos de párrafo (<p>) ni de elementos en línea.
Sintaxis
<p>La primera parte habla sobre el origen del mate.</p>
<hr>
<p>A continuación, la preparación paso a paso.</p>También se escribe con barra de cierre (herencia de XHTML):
<hr />Ambas formas son válidas en HTML5.
Atributos
<hr> no tiene atributos propios vigentes. Acepta los atributos globales de HTML (class, id), que se usan principalmente para aplicar estilos CSS.
Accesibilidad
El rol implícito de <hr> es separator. Los lectores de pantalla lo anuncian como un separador al encontrarlo en el flujo lineal de lectura, lo que le indica al usuario que hubo un cambio de tema.
Cuándo usarlo / cuándo NO
| Situación | Qué usar |
|---|---|
| Cambio de tema narrativo o de sección dentro de un documento | <hr> |
| Separar secciones con estructura propia (con headings) | Nuevas secciones con <section> y headings <h2>/<h3> |
| Línea decorativa sin cambio de tema | border en CSS sobre un <div> o elemento vacío |
| Separar ítems dentro de un mismo tema | margin/border-bottom en CSS |
Notas, gotchas e interacción
<hr>no es “una línea”. Es una transición semántica. Si el tema no cambia, no usés<hr>— usá CSS para el efecto visual.- Diferencia con
<br>.<br>es un salto de línea dentro de un bloque (poesía, direcciones).<hr>es una separación temática entre bloques. Son completamente distintos en semántica y en nivel:<br>es en línea,<hr>es de bloque. - Estilo del
<hr>. En muchos proyectos el<hr>por defecto del navegador queda feo. Podés reescribirlo con CSS:
hr {
border: none;
border-top: 1px solid #e2e8f0;
margin: 2rem 0;
}Vigente / legacy
<hr> está completamente vigente. En HTML 4 se llamaba “Horizontal Rule” y tenía atributos de presentación (align, noshade, size, width) — todos son legacy desde HTML5. La semántica también cambió: en HTML 4 era puramente visual; en HTML5 es explícitamente una “separación temática” (thematic break).