<sup>
Un indice supérieur : un texte élevé et réduit, par exemple les exposants et les numéros de notes de bas de page.
- Affichage
- inline
- Balise fermante
- Obligatoire
- Contenu autorisé
- Contenu phrasant
Exemple
#<p>La pièce fait 16 m<sup>2</sup>, et 2<sup>10</sup> = 1024, c’est pourquoi un kibioctet contient 1024 octets.</p>Définition et utilisation
#L’élément <sup> marque un indice supérieur : un exposant (2^10), des unités comme m², ou un numéro de note de bas de page. Les navigateurs élèvent et réduisent ce texte.
Les notes de bas de page se relient généralement par des liens dans les deux sens : le numéro dans le texte mène au contenu de la note, et la note a un lien de retour. Cela permet de sauter facilement dans les deux sens, même au clavier.
En français, les abréviations ordinales s’écrivent traditionnellement avec un indice supérieur, comme dans 1<sup>er</sup> ou 2<sup>e</sup>. Comme <sub>, l’élément augmente légèrement la hauteur de la ligne, ce que vous corrigerez en CSS.
Syntaxe
#2<sup>10</sup>Attributs
#Cet élément n’a pas d’attributs propres. Il accepte les attributs globaux, comme class, id ou hidden.
Plus d’exemples
#<p>La première version de JavaScript a été écrite en 10 jours<sup><a href="#note-1" id="ref-1">1</a></sup>.</p>
<p id="note-1">
<small>1. Son auteur était Brendan Eich, qui travaillait en 1995 chez Netscape. <a href="#ref-1">Retour au texte</a></small>
</p>CSS par défaut
#La plupart des navigateurs affichent cet élément avec ces styles par défaut :
sup {
vertical-align: super;
font-size: smaller;
line-height: normal;
}Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Placez le numéro de la note dans un lien, et ajoutez dans la note un lien de retour vers le texte.
- Les abréviations ordinales comme
1<sup>er</sup>restent lisibles même si le<sup>ne s’affiche pas, puisque le texte complet « 1er » reste présent. - Quand les indices écartent les lignes de texte,
line-height: 0réglé poursuppeut aider.
Entrées associées
#- <sub>Un indice inférieur : un texte abaissé et réduit, par exemple dans les formules chimiques.
- <var>Une variable dans une formule mathématique ou dans un programme, ainsi qu’un symbole substituable dans une commande.
- <small>Les petits caractères : mentions légales, informations juridiques, droits d’auteur et courtes remarques annexes.
- <a>Un lien vers une autre page, un fichier, une adresse e-mail ou un endroit sur la même page.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.