# 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](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/quest-ce-que-le-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](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/balises-htlm/) peut théoriquement être insérée à n’importe quel endroit à l’intérieur de l’élément [`<body>`](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/html-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](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/attributs-html/) et est supporté par tous les navigateurs courants.

## 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 :

```html
<hr>
```

Nous pouvons illustrer le fonctionnement de l’élément avec un exemple simple de ligne horizontale HTML. Pour cela, nous prenons un paragraphe (&lt;p&gt;) et une citation (&lt;blockquote&gt;) et séparons les deux sections dans notre document HTML par une ligne horizontale. Le code correspondant ressemble alors à ceci :

```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>
```

[![Image: Exemple de ligne horizontale en HTML](https://www.ionos.fr/digitalguide/fileadmin/_processed_/c/1/csm_ligne-horizontale-html-exemple_931a58e999.webp "Exemple de ligne horizontale en HTML")](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/ligne-horizontale-html-exemple.png) La ligne horizontale permet de séparer visuellement le passage de texte et la citation. ## 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](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/html5-cest-quoi/). À la place, vous pouvez désormais utiliser l’attribut [`style`](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/balise-html-style/) de [CSS](https://www.ionos.fr/digitalguide/sites-internet/web-design/apprendre-le-css-avec-simplicite/).

Au lieu de `align`, utilisez ce code :

```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 :

```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 :

```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 :

```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 :

```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>
```


This is a markdown version of: [https://www.ionos.fr/digitalguide/sites-internet/developpement-web/creer-une-ligne-horizontale-en-html/](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/creer-une-ligne-horizontale-en-html/) for AI/LLM consumption.