<hr>
Une rupture thématique dans le contenu, par exemple un changement de scène dans un récit ou un passage à un autre sujet.
- Affichage
- block
- Balise fermante
- Aucune, élément vide
- Contenu autorisé
- Aucun, l’élément est vide
Exemple
#<p>Léa a enregistré le fichier, fermé son ordinateur portable et elle est allée se coucher, certaine que tout fonctionnait.</p>
<hr>
<p>Au réveil, elle a vu un écran blanc et un message d’erreur rouge dans la console.</p>Définition et utilisation
#L’élément <hr> marque une transition thématique entre des paragraphes : un changement de scène dans un récit, un saut dans le temps, ou un passage à un autre sujet au sein d’une même section. Les navigateurs le dessinent comme une ligne horizontale, d’où son nom, de l’anglais horizontal rule.
Cette ligne a un sens. Les lecteurs d’écran l’annoncent comme un séparateur, donc ne l’insérez pas uniquement pour la décoration. Si vous avez seulement besoin d’un simple trait, ajoutez une bordure en CSS, par exemple border-top. Entre des sections qui ont déjà leur propre titre, <hr> est généralement superflu, car le changement de sujet est déjà signalé par le titre.
Vous changez son apparence en CSS : par défaut, c’est une fine bordure en creux. Les anciens attributs size, width, noshade et align sont obsolètes. Depuis peu, <hr> peut aussi séparer des groupes d’options à l’intérieur d’une liste <select>.
Syntaxe
#<hr>Attributs
#Cet élément n’a pas d’attributs propres. Il accepte les attributs globaux, comme class, id ou hidden.
Plus d’exemples
#<p>Fin du premier module.</p>
<hr style="border: none; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #f97316, #a78bfa);">
<p>Module deux : les formulaires.</p><label for="course">Choisissez une formation</label>
<select id="course">
<option>HTML et CSS</option>
<option>JavaScript</option>
<hr>
<option>Python</option>
<option>Analyse de données</option>
</select>Vous verrez la ligne en ouvrant la liste. Les navigateurs plus anciens ignoreront le <hr> et n’afficheront que les options.
CSS par défaut
#La plupart des navigateurs affichent cet élément avec ces styles par défaut :
hr {
color: gray;
border-style: inset;
border-width: 1px;
margin-block: 0.5em;
margin-inline: auto;
overflow: hidden;
}Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- N’utilisez pas
<hr>comme élément décoratif. Dessinez une ligne décorative en CSS. - Le plus simple pour changer la couleur de la ligne est de retirer la bordure et de lui donner une hauteur et un fond :
border: none; height: 2px; background: …. - Entre des sections qui ont leur propre titre, un séparateur n’est généralement pas nécessaire.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.