Balise HTML <hr>
La balise HTML <hr> est un élément de niveau bloc qui représente une rupture thématique dans un document HTML. L’apparence visuelle de la ligne horizontale dépend du navigateur. Elle est souvent affichée avec une bordure qui crée un effet 3D.
En HTML5, la balise <hr> définit une rupture thématique entre des éléments de niveau paragraphe. Dans les versions précédentes de HTML, elle servait à tracer une ligne horizontale qui séparait visuellement le contenu. En HTML5, elle porte une signification sémantique.
Syntaxe
La balise <hr> est vide, ce qui signifie que la balise de fermeture n’est pas requise. 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 de taille HTML <hr>
L’attribut size spécifie la hauteur de la ligne.
DANGER
Bien que l’attribut size fasse partie des attributs obsolètes, il est toujours pris en charge par tous les navigateurs.
Exemple de la balise HTML <hr> avec l’attribut "size" :
Attribut size de la balise hr
<!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>TIP
Une autre façon de définir la taille de la balise <hr> consiste à utiliser la propriété CSS height.
Exemple de la balise HTML <hr> utilisée avec la propriété height :
Balise hr avec la propriété CSS width
<!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 de largeur HTML <hr>
L’attribut width spécifie la largeur de la ligne.
DANGER
L’attribut width fait également partie de la liste des attributs obsolètes, mais il est pris en charge par tous les navigateurs.
Exemple de la balise HTML <hr> avec l’attribut width :
Attribut width de la balise hr
<!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>TIP
Utilisez la propriété CSS width au lieu de l’attribut width.
Exemple de la balise HTML <hr> utilisée avec la propriété width :
Balise hr avec la propriété CSS 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 HTML <hr>
L’attribut noshade supprime l’effet d’ombrage 3D de la ligne horizontale.
DANGER
L’attribut noshade fait partie des attributs obsolètes, mais il est pris en charge par tous les navigateurs.
Exemple de la balise HTML <hr> avec l’attribut noshade :
Balise 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>TIP
Une autre façon d’obtenir l’effet noshade consiste à utiliser la propriété CSS border.
Exemple de la balise HTML <hr> utilisée avec la propriété border :
Balise hr avec la propriété CSS 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 HTML
L’attribut align spécifie l’alignement de la ligne.
DANGER
L’attribut align fait partie des attributs obsolètes, mais il est pris en charge par tous les navigateurs.
Exemple de la balise HTML <hr> avec l’attribut align :
Attribut align de la balise hr
<!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>TIP
Utilisez la propriété CSS text-align au lieu de l’attribut align de <hr>.
Exemple de la balise HTML <hr> utilisée avec la propriété margin :
Balise hr avec la propriété CSS 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>DANGER
Les attributs de présentation de la balise <hr> sont obsolètes en HTML5. Pour le style, nous utilisons plutôt CSS.
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 :
Balise hr avec la propriété CSS 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. Obsolète en HTML5, mais toujours pris en charge par les navigateurs pour assurer la compatibilité ascendante. |
| noshade | noshade | Définit que la ligne sera affichée sans effet 3D. Obsolète en HTML5, mais toujours pris en charge par les navigateurs pour assurer la compatibilité ascendante. |
| size | pixels | Définit la taille d’une ligne. Obsolète en HTML5, mais toujours pris en charge par les navigateurs pour assurer la compatibilité ascendante. |
| width | pixels % | Définit la largeur d’une ligne. Obsolète en HTML5, mais toujours pris en charge par les navigateurs pour assurer la compatibilité ascendante. |
La balise <hr> prend en charge les attributs globaux et les attributs d’événement.
Practice
What does the HTML <hr> tag do?