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