Un cours de mathématiques écrit une puissance, x2, où le 2 doit apparaître légèrement surélevé pour dire « x au carré » plutôt que « x suivi de 2 ». Un article de blog place un petit chiffre après une phrase pour renvoyer à une note en bas de page. Une date française s'écrit « le 2e mars » ou « le 1er avril », avec ces lettres traditionnellement surélevées.
Trois usages, un seul point commun : le texte surélevé porte un sens précis, jamais un simple effet de style. C'est le rôle de <sup>, qui suit exactement la même logique que sa balise jumelle <sub>, mais vers le haut plutôt que vers le bas.
Définition
<sup> enveloppe un texte qui doit s'afficher en exposant, légèrement au-dessus de la ligne de base et généralement dans une taille réduite, parce que cette position fait partie du sens de la notation : une puissance mathématique, un appel de note, une abréviation ordinale.
Comme <sub>, cette balise ne représente jamais un texte simplement décalé vers le haut pour l'apparence. Si le décalage ne change rien au sens de la phrase, la balise n'est pas la bonne réponse, une distinction reprise plus loin.
Syntaxe et balisage minimal
C'est un élément en ligne, sans attribut spécifique au-delà des attributs globaux. Il enveloppe généralement un caractère ou un très court fragment de texte, jamais une phrase entière.
<p>L'aire d'un carré de côté a vaut a<sup>2</sup>.</p>Exemple concret
Voici trois cas d'usage classiques : une puissance mathématique, un appel de note en bas de page, et une abréviation ordinale.
<p>L'énergie se calcule avec E = mc<sup>2</sup>.</p>
<p>Cette pratique existe depuis longtemps<sup><a href="#note-1">1</a></sup>.</p>
<p>Votre formation démarre le 3<sup>e</sup> septembre.</p>Dans l'appel de note, l'exposant enveloppe un lien vers la note elle-même : c'est ce lien qui rend le renvoi réellement navigable, l'exposant ne fait qu'en donner la présentation attendue par convention éditoriale.
Différence avec vertical-align en CSS
La propriété CSS vertical-align: super produit visuellement le même décalage que la balise, avec exactement le même risque de confusion que pour <sub>.
<sup> | CSS vertical-align: super | |
|---|---|---|
| Ce qu'il exprime | Un exposant qui fait partie du sens de la notation | Rien, un simple décalage visuel applicable à n'importe quel texte |
| Pour un lecteur d'écran | Peut être restitué comme un exposant selon le logiciel | Aucune différence avec le texte environnant |
| Bon usage | Puissance, appel de note, ordinal | Décaler un élément décoratif sans rapport avec une notation |
Écrire E = mc2 avec un simple décalage CSS produit la bonne apparence sans porter le sens : un moteur de recherche ou un outil d'extraction de formules perd l'information que ce 2 est une puissance et non un chiffre suivant tout bêtement le c. À l'inverse, appliquer <sup> à un badge ou une icône pour la faire flotter plus haut détourne la balise sans le moindre bénéfice sur le sens du contenu.
La convention française d'écrire les ordinaux en exposant (1er, 2e) reste une habitude typographique, pas une obligation d'accessibilité : certains lecteurs d'écran épellent l'exposant lettre par lettre, ce qui rend « 2e » parfois plus confus à l'oreille qu'à l'œil. Si vous l'utilisez, vérifiez au moins que le chiffre et sa terminaison ne se séparent jamais en fin de ligne.
Bonnes pratiques et piège classique
Réservez <sup> aux cas où l'exposant porte une information réelle : puissances, appels de note, ordinaux selon la convention typographique en vigueur. Le piège le plus courant, identique à celui de <sub>, consiste à s'en servir pour un simple effet visuel, par exemple pour faire flotter un badge « nouveau » au coin d'un bouton sans lien avec une notation, ce qui trompe les technologies d'assistance sans rien apporter en retour.
Pour une formule mathématique élaborée qui empile plusieurs niveaux d'exposants et d'indices, <math> devient plus adapté que <sup> seul, réservé aux notations simples et isolées.
Questions fréquentes
Faut-il toujours écrire les ordinaux français en exposant, comme « 2e » ?
Ce n'est pas une obligation, seulement une convention typographique héritée de l'imprimé. Beaucoup de sites l'appliquent par habitude visuelle, mais rien n'empêche d'écrire « 2e » en texte normal, un choix parfois plus sûr pour l'accessibilité, comme l'explique la remarque plus haut.
Peut-on utiliser <sup> pour un badge « Nouveau » posé au coin d'un bouton ?
Non, ce badge n'a aucun lien avec une notation d'exposant, son positionnement relève entièrement du CSS, avec position: absolute ou une propriété équivalente. <sup> reste réservé aux puissances, aux appels de note et aux ordinaux.
<sup> et <sub> peuvent-ils s'utiliser ensemble dans la même formule ?
Oui, rien ne l'empêche, par exemple pour écrire un nombre à la fois indicé et élevé à une puissance. Au-delà de deux ou trois niveaux, la lisibilité du HTML brut se dégrade vite, et une notation aussi complexe gagne alors à passer par un langage dédié comme <math> plutôt que par un empilement de balises <sup> et <sub>.