<sup> : l'élément de mise en exposant

L'élément HTML <sup> est utilisé, pour des raisons typographiques, afin d'afficher du texte en exposant (plus haut et généralement plus petit) par rapport au bloc de texte environnant.

Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !

Attributs

Cet élément inclut uniquement les attributs universels.

Notes d'utilisation

Cet élément devrait uniquement être utilisé pour des raisons typographiques lorsque la position du texte est liée à la signification de ce texte (par exemple pour une formule mathématiques) ou aux règles typographiques (par exemple en français pour M^lle, M^me ou C^ie).

Ainsi, on n'utilisera pas <sup> afin d'obtenir un effet visuel d'un logo par exemple. Pour un simple effet de mise en forme (hors typographie), on utilisera plutôt la propriété vertical-align, utilisée avec la valeur super (voire avec une valeur numérique si on souhaite être plus précis).

Voici quelques cas d'utilisation (non exhaustifs) pour <sup> :

• L'utilisation d'exposants dans une formule mathématique : x².
  • Dans le cadre de formules complexes, MathML peut s'avérer plus pertinent que l'enchaînement d'éléments <sub> et <sup>.
• L'affichage de lettres supérieures pour respecter certaines conventions typographiques (ex. M^lle).
• La représentation de nombres ordinaux : 7^e art.

Exemples

Puissance mathématique

HTML

<p>
  Voici la fonction exponentielle :
  e<sup>x</sup>.
</p>

Résultat

Lettres supérieures

Bien que, techniquement, le lettrage supérieur ne corresponde pas à la mise en exposant, on voit souvent <sup> utilisé pour certaines abréviations.

HTML

<p>
  Robert a présenté son rapport à M<sup>lle</sup> Bernard.
</p>

Résultat

Nombres ordinaux

HTML

<p>
  Voici comment le nombre ordinal cinquième est écrit dans
  différentes langues
</p>
<ul>
  <li>en français : 5<sup>e</sup></li>
  <li>en anglais : 5<sup>th</sup></li>
</ul>

Résultat

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'élément HTML <sub> permet un effet de mise en indice. Il est à noter que l'élément <sub> et l'élément <sup> ne peuvent pas être utilisés simultanément. Pour afficher le symbole chimique d'un élément, il faudra utiliser MathML pour représenter à la fois le numéro atomique et le nombre de masse.
• Les éléments MathML <msub>, <msup> et <msubsup>.
• La propriété CSS vertical-align.