<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.

Exemple interactif

<p>
  The <em>Pythagorean theorem</em> is often expressed as the following equation:
</p>

<p>
  <var>a<sup>2</sup></var> + <var>b<sup>2</sup></var> = <var>c<sup>2</sup></var>
</p>

p {
  font:
    1rem "Fira Sans",
    sans-serif;
}

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.