Élément HTML <hr> : l'élément de rupture thématique (règle horizontale)

Exemple interactif

<p>
  §1&nbsp;: La première règle du Fight Club est&nbsp;: vous ne parlez pas du
  Fight Club.
</p>

<hr />

<p>
  §2&nbsp;: La deuxième règle du Fight Club est&nbsp;: apportez toujours des
  cupcakes.
</p>

hr {
  border: none;
  border-top: 3px double #333333;
  color: #333333;
  overflow: visible;
  text-align: center;
  height: 5px;
}

hr::after {
  background: white;
  content: "§";
  padding: 0 4px;
  position: relative;
  top: -13px;
}

Historiquement, l'élément <hr> a toujours été présenté comme une règle horizontale ou une ligne. Bien qu'il puisse encore être affiché comme une règle horizontale dans les navigateurs visuels, cet élément est désormais défini en termes sémantiques plutôt qu'en termes présentatifs. Par conséquent, si vous souhaitez tracer une ligne horizontale, faites-le en ajoutant une bordure à un élément existant à l'aide de CSS.

Les propriétés border-* (par exemple, border-style et border-color) vous permettent de personnaliser de manière significative l'apparence d'une ligne, que vous personnalisiez un élément <hr> ou la bordure d'un autre élément.

Attributs

Cet élément prend en charge les attributs universels.

Attributs obsolètes ou non-standard

align

Définit l'alignement de la ligne horizontale sur la page. Si aucune valeur n'est renseignée, la valeur prise par défaut est left.

color

Définit la couleur à utiliser pour la ligne horizontale, grâce à un nom de couleur SVG ou à un code hexadécimal (précédé d'un #).

noshade

Avec cet attribut, la ligne horizontale n'a pas d'ombre.

size

Définit la hauteur de la ligne, exprimée en pixels.

width

Définit la longueur de la ligne, exprimée par une valeur en pixels ou en pourcents.

Exemples

Rupture thématique entre paragraphes

L'exemple suivant ajoute une rupture thématique entre des éléments de niveau paragraphe.

HTML

<article>
  <p>
    C'est le premier paragraphe de texte. C'est le premier paragraphe de texte.
    C'est le premier paragraphe de texte. C'est le premier paragraphe de texte.
  </p>
  <hr />
  <p>
    C'est le deuxième paragraphe de texte. C'est le deuxième paragraphe de
    texte. C'est le deuxième paragraphe de texte. C'est le deuxième paragraphe
    de texte.
  </p>
</article>

Résultat

Rupture thématique entre éléments de liste

La balise <hr> peut être placée à l'intérieur d'un élément de liste pour une séparation visuelle, afin de créer un séparateur entre les sections d'une liste.

HTML

<ul>
  <li>Couper</li>
  <li>Copier</li>
  <li>Coller</li>
  <li role="presentation"><hr /></li>
  <li>Supprimer</li>
</ul>

ul {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100px;
  margin: 0.75rem;
  padding: 0.75rem;
  border: 1px solid lightgrey;
}
hr {
  margin-block: 0.2rem;
  color: lightgrey;
}

Résultat

Rupture thématique entre de options de sélecteur

L'élément <hr> est autorisé dans un élément <select> pour créer une séparation visuelle entre deux éléments <option>.

HTML

<select>
  <option value="">--Choisissez une option--</option>
  <hr />
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <hr />
  <option value="option3">Option 3</option>
  <option value="option4">Option 4</option>
</select>

Résultat

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'élément <p>
• <hr> dans <select>