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

Aller à :
  1. Attributs
  2. Notes d'utilisation
  3. Exemples
  4. Spécifications
  5. Compatibilité des navigateurs
  6. Voir aussi

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.

Catégories de contenu Contenu de flux, contenu phrasé.
Contenu autorisé Contenu phrasé.
Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
Parents autorisés Tout élément acceptant du contenu phrasé.
Rôles ARIA autorisés Tous les rôles sont autorisés.
Interface DOM HTMLElement

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 Mlle, Mme ou Cie).

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 : x2.
    • 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. Mlle).
  • La représentation de nombres ordinaux : 7e 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

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de '<sub> and <sup>' dans cette spécification.		 Standard évolutif  
HTML5
La définition de '<sub> and <sup>;' dans cette spécification.		 Recommendation  

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple Oui Oui1 Oui Oui Oui
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Oui Oui Oui4 Oui Oui Oui

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.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, tregagnon
Dernière mise à jour par : SphinxKnight,