La balise HR est utilisée dans les documents Web pour afficher une ligne horizontale sur la page, ou parfois appelée règle horizontale. Contrairement à certaines balises, celle-ci n'a pas besoin d'une balise de fermeture, il vous suffit donc de taper insérer la ligne.
La ligne s'étend sur toute la largeur de la page et comporte certains attributs par défaut pour décrire l'épaisseur, l'emplacement et la couleur de la ligne, mais vous pouvez modifier ces paramètres si vous le souhaitez.
Vous pouvez modifier les caractéristiques de la ligne horizontale dans un document HTML5 en modifiant le code CSS de la page. Les lignes horizontales HTML4 ont été modifiées sur le côté HTML du document.
Le HR Tag est-il sémantique?
En HTML4, la balise HR n'était pas sémantique. Les éléments sémantiques décrivent leur signification en termes que le navigateur et le développeur peuvent facilement comprendre. La balise HR était simplement un moyen d’ajouter une simple ligne à un document où vous le souhaitiez. La mise en forme de la bordure supérieure ou inférieure de l'élément où vous souhaitez que la ligne apparaisse place une ligne horizontale en haut ou en bas de l'élément, mais en général, la balise HR était plus facile à utiliser à cette fin.
À partir de HTML5, la balise HR est devenue sémantique et définit désormais une pause thématique au niveau du paragraphe, qui constitue une rupture dans le flux du contenu qui ne justifie pas une nouvelle page ni un autre séparateur plus puissant: il s'agit d'un changement de sujet. Par exemple, vous pouvez trouver une étiquette HR après le changement de scène dans un récit ou indiquer un changement de sujet dans un document de référence.
Attributs HR dans HTML4 et HTML5
En HTML4, des attributs simples, tels que: aligner, largeur, et pas d'ombre . L'alignement peut être réglé sur la gauche , centre , droite ou justifier . La largeur ajuste la largeur de la ligne horizontale à partir de la valeur par défaut de 100% qui étend la ligne sur la page. le pas d'ombre attribut rend une ligne de couleur unie au lieu d'une couleur ombrée.
Ces attributs sont obsolètes en HTML5. Vous devriez plutôt utiliser CSS pour styliser vos balises HR dans les documents HTML5.
Voici un exemple HTML5 illustrant une ligne horizontale CSS de 10 pixels de haut (styles insérés directement dans le document avec HTML):
Une autre façon de styliser des lignes horizontales en HTML5 consiste à utiliser un fichier CSS séparé et à le lier à partir du document HTML. Dans le fichier CSS, vous écririez le style comme ceci: hr {hauteur: 10px}
Le même effet dans HTML4 nécessite que vous ajoutiez un attribut au contenu HTML. Voici comment changer la taille de la ligne horizontale avec le Taille attribut:
Le style des lignes horizontales entre CSS et HTML offre beaucoup plus de liberté. Seulement le largeur et la taille les styles sont cohérents sur tous les navigateurs, des essais et des erreurs peuvent être nécessaires lors de l'utilisation d'autres styles. La largeur par défaut est toujours égale à 100% de la largeur de la page Web ou de l'élément parent. La hauteur par défaut de la règle est de deux pixels.
