Balise HTML <sup>
La balise <sup> est utilisée pour définir un texte en exposant, qui apparaît à mi-hauteur au-dessus de la ligne de base et est affiché plus petit que le reste du texte. Cette balise est couramment utilisée pour définir des notes de bas de page et des formules.
Vous devez utiliser la balise <sup> uniquement pour des raisons typographiques. Elle ne doit pas être utilisée à des fins de mise en forme. Si vous souhaitez modifier la position verticale du texte, vous pouvez utiliser la propriété CSS vertical-align avec la valeur super.
TIP
La balise <sub> est utilisée pour définir un texte en indice.
Voici quelques cas d'utilisation pour un élément <sup> :
- Représenter des lettres en exposant dans certaines langues ou abréviations.
- Représenter des exposants (par ex. "x²").
- Représenter des nombres ordinaux (par ex. "5e" au lieu de "cinquième").
Remarque : Utilisez le texte en exposant uniquement à des fins typographiques. Évitez de l'utiliser pour masquer des informations importantes, car les technologies d'assistance pourraient les ignorer ou les mal prononcer.
Syntaxe
La balise <sup> s'utilise par paire. Le contenu est écrit entre la balise d'ouverture (<sup>) et la balise de fermeture (</sup>).
Exemple de la balise HTML <sup> :
Balise HTML <sup>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
E = mc<sup>2</sup>, where E is the energy of the object, m is the weight, c is the light speed in vacuum.
</p>
</body>
</html>Résultat
Exemple de la balise HTML <sup> utilisée avec la propriété CSS vertical-align :
Exemple de la balise HTML <sup>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
sup {
vertical-align: super;
font-size: medium;
}
</style>
</head>
<body>
<h1>Example of the sup tag</h1>
<p>
Here is some text <sup>with the sup tag</sup>.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis ...
</p>
<p>
Reference site about Lorem Ipsum,
<sup>giving information on its origins</sup>, as well as a random Lipsum generator.
</p>
</body>
</html>Exemple de la balise HTML <sup> utilisée avec la balise <sub> :
Exemple de la balise HTML <sup> avec la balise <sub>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
sup {
vertical-align: super;
font-size: medium;
}
sub {
vertical-align: sub;
font-size: small;
}
</style>
</head>
<body>
<h1>Example of the sup and sub tags</h1>
<p>
Here is some text
<sub>with the sub tag</sub>.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis ...
</p>
<p>
Reference site about Lorem Ipsum,
<sup>giving information on its origins</sup>, as well as a random Lipsum generator.</p>
</body>
</html>Attributs
La balise <sup> prend en charge les Attributs globaux et les Attributs d'événement.
Pratique
Quelle est l'utilisation et l'objectif corrects de la balise HTML <sup> ?