Médiaforma

Séparateurs horizontaux

Print Friendly, PDF & Email

Il est parfois utile d’insérer une ligne horizontale pour séparer deux parties dans un document. Pour cela, vous utiliserez la balise <hr />.

A titre d’exemple, nous allons insérer une ligne séparatrice entre deux paragraphes déjà définis dans un document HTML.

Sauvegardez le code et affichez-le dans un navigateur de votre choix. Par exemple dans Mozilla Firefox avec la commande Launch in Firefox dans le menu Exécution ou avec la commande Alt+Ctrl+Maj+X.

Comme vous pouvez le voir, la largeur de la barre horizontale s’adapte à celle du navigateur.

Si vous voulez que la barre ait une largeur plus faible, utilisez l’attribut width et précisez, entre guillemets, le pourcentage de la largeur du navigateur à utiliser. Ici par exemple, la barre doit mesurer 30% de la largeur du navigateur.

Comme vous pouvez le voir, la largeur de la barre s’adapte à celle du navigateur.

Il est également possible de modifier l’épaisseur de la barre avec l’attribut size. Affectez-lui la largeur en pixels de la barre, entre guillemets. Ici par exemple, la barre a une largeur de 10 pixels :

<hr size=”10″ />

Voici le résultat dans Firefox :

Enfin, il est possible d’annuler l’ombrage dans la barre avec l’attribut noshade :

<hr noshade />

Les attributs width, size et noshade peuvent être utilisés conjointement :

<hr width=”50%” size=”15″ noshade />

Voici le résultat dans Internet Explorer :

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

Cette balise n’est-elle pas plus d’actualité en HTML5 en tant que séparateur ? D’après ce que j’ai lu, elle n’aurait plus qu’une valeur sémantique. Mais alors comment avoir le même rendu et avec le moins de code possible ?

Bonjour Julien,

D’un point de vue HTML5, la balise


définit une rupture thématique. Elle n’est pas du tout “deprecated” et vous pouvez continuer à l’utiliser. De plus, elle est prise en compte par tous les navigateurs actuels…