<hr> en HTML : marquer un vrai changement de sujet, pas juste tirer un trait

Dans un récit ou un article un peu long, il arrive un moment où le sujet change vraiment : une nouvelle scène commence, un article de blog passe d'un exemple à un autre sans transition naturelle. Un simple espace supplémentaire entre deux paragraphes ne dit rien de particulier, il ressemble à n'importe quel autre espacement de mise en page.

<hr> marque ce moment précis : une rupture thématique entre deux sections qui appartiennent pourtant au même contexte, pas une simple ligne posée là pour faire joli.

Définition

<hr> représente une rupture thématique à l'intérieur d'un même contenu : un changement de sujet, de scène ou d'angle, sans qu'il soit nécessaire d'ouvrir une nouvelle section à part entière avec son propre titre. Les navigateurs l'affichent par défaut comme un simple trait horizontal, mais ce rendu n'est qu'une convention visuelle : le sens réel de la balise est la coupure qu'elle marque, pas le trait lui-même.

Syntaxe

<hr> est un élément vide : il ne contient rien, n'a pas de balise fermante, et n'accepte que les attributs globaux. Les anciens attributs de présentation comme size, width ou noshade sont obsolètes depuis longtemps, le style d'un <hr> se règle désormais entièrement en CSS.

Vous croiserez parfois la forme <hr />, avec une barre oblique avant le chevron fermant, héritée des habitudes XHTML. En HTML, cette barre est purement optionnelle : <hr> et <hr /> produisent exactement le même résultat, le navigateur ne fait aucune différence entre les deux écritures, et aucune des deux ne réclame de balise fermante séparée.

<p>
  Le projet a démarré sur une idée simple : un carnet de recettes personnel.
</p>
<hr />
<p>
  Trois ans plus tard, le même carnet compte deux cent mille membres actifs.
</p>

Sémantique et accessibilité

Les technologies d'assistance exposent <hr> avec le rôle separator, ce qui permet à un lecteur d'écran de signaler la coupure plutôt que de la passer sous silence comme un simple espace visuel. Cette annonce n'a de sens que si la coupure est réelle : posé entre deux paragraphes qui continuent la même idée, <hr> n'apporte qu'une information trompeuse, un changement de sujet qui n'existe pas vraiment.

Un usage qui dépasse le simple article

La rupture thématique se rencontre le plus souvent dans un article ou un récit, mais la norme autorise aussi <hr> comme descendant d'un <select>, pour séparer visuellement deux groupes d'options, un peu comme les traits qui séparent les sections d'un menu contextuel de système d'exploitation.

Bonnes pratiques

Un seul <hr> suffit pour marquer une rupture, jamais plusieurs à la suite pour créer un espace plus large : c'est le rôle du CSS, pas celui d'un élément sémantique répété. De la même façon, il vaut mieux réserver <hr> aux vraies ruptures de sujet plutôt que de l'ajouter systématiquement entre chaque paragraphe d'une longue page, au risque de lui faire perdre toute sa valeur de signal.

Non, <hr> n'a aucun attribut spécifique. Il n'affiche aucun contenu de remplacement puisqu'il n'a lui-même aucun contenu : c'est un élément purement structurel, réduit aux attributs globaux comme id ou class.

Ce n'est techniquement pas interdit, mais ce n'est pas son rôle. Si le besoin est purement visuel, une bordure posée en CSS convient bien mieux : elle sépare deux blocs sans annoncer aux technologies d'assistance une rupture thématique qui n'existe pas réellement.

Non, seulement entre des passages qui traitent vraiment d'un sujet différent. En abuser entre chaque paragraphe fait perdre toute signification à la balise et alourdit inutilement la page ; pour une simple respiration visuelle entre deux idées liées, une marge en CSS suffit.