La ligne ho­ri­zon­tale HTML est une ligne qui divise le contenu d’un site Web en deux sections. La balise HTML <hr> cor­res­pon­dante ne nécessite pas d’élément de fermeture.

Qu’est-ce qu’une ligne ho­ri­zon­tale HTML ?

Une HTML ho­ri­zon­tal line est utilisée pour tracer une ligne de sé­pa­ra­tion visible et continue entre deux pa­ra­graphes 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 li­si­bi­lité d’une page Web. <hr> n’est pas seulement une ligne de sé­pa­ra­tion visuelle, elle a également une im­por­tance sé­man­tique : l’élément indique qu’il y a un chan­ge­ment de sujet ou une pause thé­ma­tique.

La balise HTML peut théo­ri­que­ment ê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é­via­tion « hr » signifie ho­ri­zon­tal ruler (en français : règle ho­ri­zon­tale). HTML <hr> accepte tous les attributs HTML et est supporté par tous les na­vi­ga­teurs courants.

Hé­ber­ge­ment Web
Hé­ber­ge­ment Web de pointe au meilleur prix
  • 3x plus rapide, 60 % d'éco­no­mie
  • Haute dis­po­ni­bi­lité >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 pa­ra­mètres autres que la balise :

<hr>
html

Nous pouvons illustrer le fonc­tion­ne­ment de l’élément avec un exemple simple de ligne ho­ri­zon­tale HTML. Pour cela, nous prenons un pa­ra­graphe (<p>) et une citation (<blockquote>) et séparons les deux sections dans notre document HTML par une ligne ho­ri­zon­tale. Le code cor­res­pon­dant 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>
html
Image: Exemple de ligne horizontale en HTML
La ligne ho­ri­zon­tale permet de séparer vi­suel­le­ment le passage de texte et la citation.

Per­son­na­li­ser l’apparence de la ligne ho­ri­zon­tale en HTML

Il est possible de per­son­na­li­ser l’apparence d’une ligne ho­ri­zon­tale 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>
html

Pour modifier la couleur de la ligne HTML ho­ri­zon­tale, 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>
html

Au lieu de noshade, utilisez le code suivant pour inclure une ligne ho­ri­zon­tale 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>
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>
html

Vous dé­fi­nis­sez la largeur de la ligne ho­ri­zon­tale 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>
html
Nom de domaine
Votre domaine en un clic
  • 1 cer­ti­fi­cat SSL Wildcard par contrat
  • Fonction incluse Domain Connect pour une con­fi­gu­ra­tion DNS sim­pli­fiée
Aller au menu principal