Docs HTML exécutables : Exposant et indice

Q: Comment écrire un exposant en HTML ?

Entourez le texte surélevé de : x 2 affiche x au carré, 1 st un ordinal. Le navigateur l'affiche plus petit et surélevé au-dessus de la ligne de base.

Q: Comment écrire un indice en HTML ?

Utilisez : H 2 O pour l'eau, x 1 pour un indice. Il s'affiche plus petit et abaissé sous la ligne de base.

Q: Comment écrire x au carré en HTML ?

Soit x 2 , soit le caractère tout prêt x², que vous pouvez aussi taper avec l'entité ². Le caractère convient pour les carrés et les cubes ; marche pour n'importe quel exposant, comme 2 n+1 .

Q: Peut-on utiliser le CSS à la place de ?

vertical-align: super avec une font-size plus petite donne le même rendu, mais et portent un sens : « m2 » et « m 2 » sont des valeurs différentes. Utilisez les balises quand la position surélevée ou abaissée fait partie du contenu.

Exposant et indice en HTML : balises sup et sub

Écrivez du texte en exposant avec et en indice avec : puissances, ordinaux, appels de note et formules chimiques. Découvrez les usages courants, comment éviter qu'ils écartent les lignes, et quand un caractère Unicode ou MathML convient mieux.

Cette page contient des éditeurs exécutables - modifiez, exécutez et voyez la sortie instantanément.

Par Kevin Spektor, Co-founder & CTO

Publié le Sep 24, 2026

Comment écrire un exposant en HTML

Entourez le texte surélevé de . Le navigateur l'affiche plus petit et au-dessus de la ligne. Son partenaire  affiche le texte plus petit et abaissé :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sup and sub</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; }
  </style>
</head>
<body>
  <p>Area: 25 m<sup>2</sup></p>
  <p>E = mc<sup>2</sup></p>
  <p>She finished 1<sup>st</sup> in the 3<sup>rd</sup> race.</p>
  <p>Water is H<sub>2</sub>O and carbon dioxide is CO<sub>2</sub>.</p>
</body>
</html>

 et  sont inline et peuvent contenir d'autres éléments inline, donc 2n+1 ou xi fonctionnent aussi.

Usages courants

Vous voulez	Écrivez	Résultat
Une puissance	`10<sup>3</sup>`	10 puissance 3
Un ordinal	`2<sup>nd</sup>`	2nd avec les lettres surélevées
Un appel de note	`text<sup><a href="#n1">1</a></sup>`	Un 1 surélevé et cliquable
Une formule chimique	`C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>`	Glucose
Un indice ou une base	`x<sub>1</sub>`, `log<sub>2</sub>`	1 et 2 abaissés
Une marque	`Brand<sup>TM</sup>` ou `Brand™`	TM surélevé

Utilisez les balises quand la position fait partie du sens : m2 et m2 sont deux choses différentes. Pour un texte simplement affiché en petit (un libellé, un badge), utilisez plutôt le CSS.

Des notes de bas de page avec sup

Un appel de note est un lien en exposant vers une note en bas de page. Donnez un id à chaque note et faites pointer le lien vers elle :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Footnotes</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; line-height: 1.6; }
    .notes { margin-top: 600px; font-size: 14px; border-top: 1px solid #e5e7eb; }
    sup a { text-decoration: none; }
  </style>
</head>
<body>
  <p>The first website went live in 1991.<sup><a href="#n1" id="r1">1</a></sup> It is still online.<sup><a href="#n2" id="r2">2</a></sup></p>
  <ol class="notes">
    <li id="n1">Published by Tim Berners-Lee at CERN. <a href="#r1">Back</a></li>
    <li id="n2">A restored copy is hosted by CERN. <a href="#r2">Back</a></li>
  </ol>
</body>
</html>

Cliquez sur un numéro pour aller à sa note, et sur « Back » pour revenir. Retirer le soulignement du petit lien garde le paragraphe net, tandis que la couleur du lien le signale toujours comme cliquable.

Garder un interligne régulier

Par défaut, un  ou un  peut rendre sa ligne plus haute que les lignes voisines, si bien qu'un paragraphe avec quelques exposants paraît irrégulièrement espacé. Mettre line-height: 0 sur eux corrige le problème :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sup line height</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    p { width: 260px; line-height: 1.3; border: 2px solid #e5e7eb; padding: 4px; }
    .fixed { border-color: #16a34a; }
    .fixed sup, .fixed sub { line-height: 0; }
  </style>
</head>
<body>
  <p>Line one of the text.<br>Line two has x<sup>2</sup> in it.<br>Line three is plain.<br>Line four has H<sub>2</sub>O.</p>
  <p class="fixed">Line one of the text.<br>Line two has x<sup>2</sup> in it.<br>Line three is plain.<br>Line four has H<sub>2</sub>O.</p>
</body>
</html>

La boîte grise est plus haute car les lignes deux et quatre ont été écartées. Dans la boîte verte, toutes les lignes ont la même hauteur. Ajoutez cette règle une fois à votre feuille de style de base et n'y pensez plus.

Caractères Unicode et MathML

Pour quelques cas courants, il existe des caractères tout prêts : ² (²), ³ (³), ¹ (¹), ™ (™) et ½ (½). Ils n'ont besoin d'aucune balise et n'influencent pas la hauteur de ligne, mais ils n'existent que pour certains chiffres et lettres.

Pour de vraies formules (fractions, racines, exposants d'exposants), utilisez MathML, que les navigateurs actuels affichent nativement :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Unicode and MathML</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; }
  </style>
</head>
<body>
  <p>Entities: 5 m&sup2;, 2 m&sup3;, Brand&trade;</p>
  <p>MathML:
    <math>
      <msup><mi>a</mi><mn>2</mn></msup><mo>+</mo>
      <msup><mi>b</mi><mn>2</mn></msup><mo>=</mo>
      <msup><mi>c</mi><mn>2</mn></msup>
    </math>
  </p>
  <p>Nested exponent:
    <math><msup><mi>e</mi><msup><mi>x</mi><mn>2</mn></msup></msup></math>
  </p>
</body>
</html>

<msup> prend une base et un exposant ; <msub> fait de même pour les indices. Pour un seul exposant dans une phrase,  est plus simple.

Erreurs fréquentes

Utiliser  pour rapetisser du texte. Il surélève aussi le texte et indique aux lecteurs qu'il s'agit d'un exposant. Utilisez font-size pour un petit texte.
Un interligne irrégulier. Ajoutez sup, sub { line-height: 0; }.
Écrire x^2 ou H2O dans un texte final. Utilisez x2 et H2O pour que le contenu se lise correctement.
Des appels de note trop petits pour être touchés. Sur téléphone, un seul chiffre surélevé est une cible minuscule. Ajoutez un peu de padding à sup a, ou placez les notes près du texte.

Questions fréquentes

Comment écrire un exposant en HTML ?

Entourez le texte surélevé de  : x2 affiche x au carré, 1st un ordinal. Le navigateur l'affiche plus petit et surélevé au-dessus de la ligne de base.

Comment écrire un indice en HTML ?

Utilisez  : H2O pour l'eau, x1 pour un indice. Il s'affiche plus petit et abaissé sous la ligne de base.

Comment écrire x au carré en HTML ?

Soit x2, soit le caractère tout prêt x², que vous pouvez aussi taper avec l'entité ². Le caractère convient pour les carrés et les cubes ;  marche pour n'importe quel exposant, comme 2n+1.

Pourquoi rend l'interligne irrégulier ?

Le texte surélevé peut rendre sa ligne plus haute que les autres du paragraphe. Corrigez-le avec sup, sub { line-height: 0; }, qui les empêche d'ajouter de la hauteur à la ligne.

Peut-on utiliser le CSS à la place de ?

vertical-align: super avec une font-size plus petite donne le même rendu, mais  et  portent un sens : « m2 » et « m2 » sont des valeurs différentes. Utilisez les balises quand la position surélevée ou abaissée fait partie du contenu.

Concepts liés