1. Description de la balise <hr>

La balise HTML <hr> est une balise d'élément vide (ou balise autonome) qui est utilisée pour créer une ligne horizontale ou une séparation visuelle dans une page web. Le nom "hr" signifie "horizontal rule" en anglais, ce qui se traduit par "règle horizontale" en français. Cette balise est couramment utilisée pour diviser le contenu d'une page web en sections ou pour marquer une transition entre deux parties distinctes d'une page. Voici quelques caractéristiques importantes de la balise <hr> :

1. Balise autonome : La balise <hr> n'a pas de balise d'ouverture correspondante. Elle est autonome et est fermée elle-même.
2. Séparation horizontale : Lorsqu'elle est rendue dans un navigateur web, la balise <hr> affiche une ligne horizontale s'étendant sur toute la largeur de la zone de contenu parente.
3. Attributs : La balise <hr> peut accepter certains attributs facultatifs pour personnaliser son apparence, tels que size, width, align, color, etc. Ces attributs permettent de spécifier la taille, la largeur, l'alignement et la couleur de la ligne.

2. Liste des attributs de la balise <hr>

La balise HTML <hr> est une balise d'élément vide qui peut accepter plusieurs attributs pour personnaliser son apparence et son comportement. Voici une liste des attributs couramment utilisés avec la balise <hr> :

1. align : Cet attribut permet de spécifier l'alignement horizontal de la ligne horizontale. Les valeurs possibles sont : "left" (gauche), "center" (centre), "right" (droite) et "justify" (justifié).
2. size : Cet attribut détermine l'épaisseur ou l'épaisseur de la ligne. La valeur par défaut est généralement de 1, mais vous pouvez spécifier une autre valeur en pixels.
3. width : Cet attribut permet de définir la largeur de la ligne horizontale. Vous pouvez spécifier une valeur en pixels ou en pourcentage de la largeur de l'élément parent.
4. color : Cet attribut permet de définir la couleur de la ligne horizontale. Vous pouvez spécifier une couleur en utilisant son nom, son code hexadécimal ou son code RGB.
5. noshade : Cet attribut est généralement utilisé sans valeur ("noshade") pour indiquer que la ligne horizontale ne doit pas être ombrée. Cela désactive l'effet de dégradé sur la ligne.
6. class : Cet attribut permet d'assigner une classe CSS à la balise <hr>, ce qui vous permet de personnaliser davantage son apparence à l'aide de feuilles de style.

Exemple

Exemple

Exemple

Exemple

Exemple

Exemple

3. Exemples d'usages de la balise <hr>

Exemple simple

Remarque

Il est recommandé d'utiliser des techniques de mise en page CSS plus modernes pour la création de séparations et de lignes décoratives, car la balise <hr> est principalement utilisée pour des séparations fonctionnelles ou structurelles plutôt que pour la décoration.

Exemple avec attributs

Voici un exemple d'utilisation de la balise <hr> avec plusieurs attributs pour personnaliser son apparence. Cet exemple illustre comment vous pouvez combiner ces attributs pour personnaliser la balise <hr> selon vos besoins spécifiques de conception web :

Ce qui affiche au navigateur :

Explication :

1. L'attribut align est défini sur "center" : ce qui aligne la ligne horizontale au centre de son conteneur.
2. L'attribut size est défini sur "3" : ce qui augmente l'épaisseur de la ligne.
3. L'attribut width est défini sur "60%" : ce qui spécifie que la ligne horizontale doit occuper 60 % de la largeur de son conteneur.
4. L'attribut color est défini sur "blue" : ce qui donne à la ligne une couleur bleue.
5. L'attribut class est défini sur "ligne-personnalisee" : ce qui permet d'appliquer des styles CSS personnalisés à cette ligne en utilisant une classe CSS correspondante dans une feuille de style (NB: vous devez créer cette classe).

 

 

 

Younes Derfoufi
CRMEF OUJDA