Comment faire une ligne horizontale en HTML avec la balise hr ?
La ligne horizontale HTML est une ligne qui divise le contenu d’un site Web en deux sections. La balise HTML <hr> correspondante ne nécessite pas d’élément de fermeture.
Qu’est-ce qu’une ligne horizontale HTML ?
Une HTML horizontal line est utilisée pour tracer une ligne de séparation visible et continue entre deux paragraphes ou autres sections logiques dans un document HTML. Elle est définie avec la balise (ou tag) HTML <hr> et sert à améliorer la structure et la lisibilité d’une page Web. <hr> n’est pas seulement une ligne de séparation visuelle, elle a également une importance sémantique : l’élément indique qu’il y a un changement de sujet ou une pause thématique.
La balise HTML peut théoriquement être insérée à n’importe quel endroit à l’intérieur de l’élément <body> et se passe d’un élément de fermeture. L’abréviation « hr » signifie horizontal ruler (en français : règle horizontale). HTML <hr> accepte tous les attributs HTML et est supporté par tous les navigateurs courants.
- 3x plus rapide, 60 % d'économie
- Haute disponibilité >99,99 %
- Seulement chez IONOS : jusqu'à 500 Go inclus
HTML <hr> : syntaxe et exemple
La syntaxe de HTML <hr> est simple, car vous n’avez pas besoin d’attributs ou de paramètres autres que la balise :
<hr>Nous pouvons illustrer le fonctionnement de l’élément avec un exemple simple de ligne horizontale HTML. Pour cela, nous prenons un paragraphe (<p>) et une citation (<blockquote>) et séparons les deux sections dans notre document HTML par une ligne horizontale. Le code correspondant ressemble alors à ceci :
<!DOCTYPE html>
<html>
<body>
<h1>HTML : ligne horizontale</h1>
<p>HTML est le langage de balisage standard pour représenter les pages Web. Il décrit la structure d’une page Web et permet de définir du texte, des images, des liens et d’autres éléments.</p>
<hr>
<blockquote>« Le HTML est facile à apprendre et offre une base solide pour la création de pages Web. »</blockquote>
</body>
</html>
Personnaliser l’apparence de la ligne horizontale en HTML
Il est possible de personnaliser l’apparence d’une ligne horizontale en HTML. Alors que les attributs align, color, noshade, size et width étaient utilisés à cet effet, ils ne sont plus supportés depuis HTML5. À la place, vous pouvez désormais utiliser l’attribut style de CSS.
Au lieu de align, utilisez ce code :
<!DOCTYPE html>
<html>
<body>
<h1>HTML : ligne horizontale</h1>
<p>HTML est le langage de balisage standard pour les documents destinés à être affichés sur le Web. Il décrit la structure d’une page Web et permet de définir du texte, des images, des liens et d’autres éléments.</p>
<hr style="width:50%;text-align:left;margin-left:0">
<blockquote>« Le HTML est facile à apprendre et offre une base solide pour la création de sites Web. »</blockquote>
</body>
</html>Pour modifier la couleur de la ligne HTML horizontale, utilisez la propriété color avec l’attribut style :
<!DOCTYPE html>
<html>
<body>
<h1>HTML : ligne horizontale</h1>
<p>HTML est le langage de balisage standard pour les documents destinés à être affichés sur le Web. Il décrit la structure d’une page Web et permet de définir du texte, des images, des liens et d’autres éléments.</p>
<hr style="color:yellow;background-color:gray">
<blockquote>« HTML est facile à apprendre et offre une base solide pour la création de pages Web. »</blockquote>
</body>
</html>Au lieu de noshade, utilisez le code suivant pour inclure une ligne horizontale sans ombre :
<!DOCTYPE html>
<html>
<body>
<p>Une ligne horizontale normale :</p>
<hr>
<p>Avec CSS :</p>
<hr style="height:2px;border-width:0;color:gray;background-color:gray">
</body>
</html>Pour modifier la hauteur, utilisez height :
<!DOCTYPE html>
<html>
<body>
<p>Une ligne horizontale normale :</p>
<hr>
<p>Une ligne horizontale d’une hauteur de 50 pixels :</p>
<hr style="height:50px">
</body>
</html>Vous définissez la largeur de la ligne horizontale HTML avec le paramètre width :
<!DOCTYPE html>
<html>
<body>
<p>Une ligne horizontale normale :</p>
<hr>
<p>Une ligne horizontale d’une largeur de 30 % :</p>
<hr style="width:30%">
</body>
</html>- 1 certificat SSL Wildcard par contrat
- Fonction incluse Domain Connect pour une configuration DNS simplifiée