Balise HTML <hr>
La balise HTML <hr> marque une rupture thématique rendue sous forme de ligne horizontale. Apprenez son usage, le style CSS, les attributs et l'accessibilité.
La balise HTML <hr> représente une rupture thématique — un changement de sujet au sein d'une section de contenu, comme un changement de scène dans une histoire ou un passage à un nouveau sujet dans un article de référence. Par défaut, le navigateur la restitue sous la forme d'une ligne horizontale, mais son rôle premier est sémantique, et non décoratif.
En HTML5, la balise <hr> porte un sens : elle indique aux navigateurs et aux technologies d'assistance que les paragraphes environnants appartiennent à des sujets différents. Dans les versions antérieures de HTML, elle était considérée uniquement comme un élément de présentation servant à tracer une ligne entre des contenus. Aujourd'hui, si vous souhaitez uniquement un séparateur décoratif sans changement de sujet, il est préférable d'utiliser une bordure CSS sur un autre élément plutôt qu'un <hr>.
L'apparence visuelle de la ligne dépend du navigateur ; elle est souvent dessinée avec un léger effet 3D (« ombré ») que vous pouvez remplacer par du CSS.
Quand utiliser <hr> (et quand ne pas l'utiliser)
Utilisez <hr> lorsqu'il y a un véritable changement de sujet :
- Entre deux sections distinctes d'un long article ou document.
- Entre des scènes ou des transitions dans un récit.
- Pour séparer des groupes de champs de formulaire ou d'éléments de liste sans lien, là où un nouveau titre serait trop lourd.
N'utilisez pas <hr> uniquement à des fins décoratives. Si la ligne n'est là que pour être esthétique — par exemple un séparateur sous chaque avatar dans une liste — elle ajoute du bruit pour les utilisateurs de lecteurs d'écran. Dans ce cas, stylisez une bordure sur un élément existant, ou ajoutez role="presentation" à la règle afin qu'elle soit ignorée sémantiquement. Pour structurer les régions d'une page par leur sens, consultez les éléments sémantiques en HTML5.
Accessibilité : <hr> possède le rôle ARIA implicite separator et est exposé aux technologies d'assistance — de nombreux lecteurs d'écran l'annoncent (par exemple, comme « séparateur »). C'est exactement ce que vous souhaitez pour une vraie rupture thématique, mais c'est aussi la raison pour laquelle une ligne purement décorative doit utiliser CSS ou role="presentation" à la place.
Syntaxe
La balise <hr> est vide, ce qui signifie que la balise de fermeture n'est pas obligatoire. Mais en XHTML, la balise (<hr>) doit être fermée (<hr/>).
Exemple de la balise HTML <hr> :
Balise hr HTML
<!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>Attribut size de <hr> en HTML
L'attribut size spécifie la hauteur de la ligne.
Bien que l'attribut size fasse partie des attributs dépréciés, il est encore pris en charge par tous les navigateurs.
Exemple de la balise HTML <hr> avec l'attribut « 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>Une autre façon de spécifier la taille de la balise <hr> est d'utiliser la propriété CSS height.
Exemple de la balise HTML <hr> utilisée avec la propriété 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>Attribut width de <hr> en HTML
L'attribut width spécifie la largeur de la ligne.
L'attribut width fait également partie des attributs dépréciés, mais est pris en charge par tous les navigateurs.
Exemple de la balise HTML <hr> avec l'attribut 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>Utilisez la propriété CSS width à la place de l'attribut width.
Exemple de la balise HTML <hr> utilisée avec la propriété 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>Attribut noshade de <hr> en HTML
L'attribut noshade supprime l'effet d'ombrage 3D de la ligne horizontale.
L'attribut noshade fait partie des attributs dépréciés, mais est pris en charge par tous les navigateurs.
Exemple de la balise HTML <hr> avec l'attribut 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>Pour supprimer l'aspect 3D (« ombré ») par défaut en CSS, donnez à <hr> une bordure plate et un arrière-plan transparent. La règle par défaut est dessinée avec des bordures ombrées ; en la remplaçant par une seule bordure pleine (et en effaçant l'arrière-plan), on obtient une ligne simple et plate — le même résultat que l'attribut noshade.
Exemple de la balise HTML <hr> utilisée avec la propriété 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>Attribut align en HTML
L'attribut align spécifie l'alignement de la ligne.
L'attribut align fait partie des attributs dépréciés, mais est pris en charge par tous les navigateurs.
Exemple de la balise HTML <hr> avec l'attribut 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>Pour positionner un <hr>, définissez une width et contrôlez sa margin horizontale — pas text-align. Puisque <hr> est un élément de bloc, text-align ne le déplace pas. Utilisez margin-right: auto pour le pousser à gauche, margin-left: auto pour le pousser à droite, ou margin: 0 auto pour le centrer.
Exemple de la balise HTML <hr> utilisée avec la propriété 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>Les attributs de présentation de la balise <hr> sont dépréciés en HTML5. Pour la mise en forme, nous utilisons CSS à la place.
Comment styliser la balise <hr>
La propriété CSS border est utilisée pour styliser la ligne horizontale.
Exemple de la balise HTML <hr> stylisée avec la propriété 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>Attributs
| Attribut | Valeur | Description |
|---|---|---|
| align | left center right | Définit l'alignement horizontal d'une ligne. Déprécié en HTML5, mais encore pris en charge par les navigateurs pour la rétrocompatibilité. |
| noshade | noshade | Définit que la ligne sera affichée sans effet 3D. Déprécié en HTML5, mais encore pris en charge par les navigateurs pour la rétrocompatibilité. |
| size | pixels | Définit la taille d'une ligne. Déprécié en HTML5, mais encore pris en charge par les navigateurs pour la rétrocompatibilité. |
| width | pixels % | Définit la largeur d'une ligne. Déprécié en HTML5, mais encore pris en charge par les navigateurs pour la rétrocompatibilité. |
La balise <hr> prend en charge les attributs globaux et les attributs d'événement.