Qu'est-ce que la balise HTML HR et comment l'utilisez-vous ?

click fraud protection

Ce qu'il faut savoir

  • Tapez simplement <heure> d'insérer une ligne en HTML avec la balise HR.
  • Modifiez les caractéristiques de la ligne en éditant CSS dans un document HTML5.

Les RH étiqueter est utilisé dans les documents Web pour afficher une ligne horizontale sur la page, parfois appelée règle horizontale. Contrairement à certaines balises, celle-ci n'a pas besoin de balise de fermeture. Tapez <heure> pour insérer la ligne.

La balise RH est-elle sémantique?

En HTML4, la balise HR n'était pas sémantique. Éléments sémantiques décrire leur signification en termes de navigateur, et le développeur peut facilement comprendre. La balise HR n'était qu'un moyen d'ajouter une simple ligne à un document là où vous le vouliez. En stylisant uniquement la bordure supérieure ou inférieure de l'élément où vous vouliez que la ligne apparaisse, placez un ligne horizontale en haut ou en bas de l'élément, mais en général, la balise HR était plus facile à utiliser pour cela objectif.

À partir de HTML5, la balise HR est devenue sémantique et définit désormais une rupture thématique au niveau du paragraphe, qui est un rupture dans le flux du contenu qui ne justifie pas une nouvelle page ou un autre délimiteur plus fort - c'est un changement de sujet. Par exemple, vous pouvez trouver une balise RH après un changement de scène dans une histoire, ou elle peut indiquer un changement de sujet dans un document de référence.

instagram viewer

Attributs RH en HTML4 et HTML5

La ligne s'étend sur toute la largeur de la page. Certains attributs par défaut décrivent l'épaisseur, l'emplacement et la couleur de la ligne, mais vous pouvez modifier ces paramètres si vous le souhaitez.

En HTML4, vous pouvez attribuer des attributs simples à la balise HR, notamment align, width et noshade. L'alignement peut être réglé sur la gauche, centre, droite, ou alors justifier. La largeur ajuste la largeur de la ligne horizontale à partir des 100 % par défaut qui étendent la ligne sur la page. le pas d'ombre L'attribut affiche 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 RH dans les documents HTML5.

Il s'agit d'un exemple HTML5 de stylisation de la ligne horizontale à 10 pixels de haut à l'aide de CSS en ligne (styles insérés directement dans le document avec HTML):

Capture d'écran montrant comment styliser la balise HR en HTML à l'aide de CSS en ligne
Utilisation de CSS en ligne pour styliser les RH.Jennifer Kyrnin

Une autre façon de styliser les lignes horizontales en HTML5 consiste à utiliser un fichier CSS séparé, et lien vers celui-ci à partir du document HTML. Dans le fichier CSS, vous écririez le style comme ceci:

Capture d'écran montrant comment utiliser un CSS externe pour styliser la balise HR en HTML
Utilisation de CSS externe pour styliser les RH.Jennifer Kyrnin
h {
hauteur: 10px
}

Le même effet en HTML4 vous oblige à ajouter un attribut au contenu HTML. Voici comment changer la taille de la ligne horizontale avec le Taille attribut:

Capture d'écran de l'attribut size pour la balise HR en HTML
Styliser la balise HR en HTML4.Jennifer Kyrnin

Il y a beaucoup plus de liberté dans styliser les lignes horizontales en CSS contre HTML.

Seulement le largeur et la taille les styles sont cohérents dans tous les navigateurs, donc des essais et des erreurs peuvent être nécessaires lors de l'utilisation d'autres styles. La largeur par défaut correspond toujours à 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.

instagram story viewer