Subscript and Superscript
Display text below or above the baseline.
Syntax
H<sub>2</sub>O and x<sup>2</sup>Two elements let you position text above or below the normal line.
<sub>— subscript, displayed slightly below the line. Useful for chemical formulas.<sup>— superscript, displayed slightly above the line. Useful for exponents and footnotes.
Example
Loading editor…
Press Run to see the result.
When to use it
- A science textbook app uses <sub> to display chemical formulas like H2O and CO2 correctly.
- A math tutorial site uses <sup> to display exponents in expressions like x squared.
- A legal document renderer uses <sup> for footnote reference numbers that link to endnotes.
More examples
Chemical formula with subscript
<sub> lowers the number in chemical formulas to indicate atom counts at subscript position.
<p>Chemical compounds:</p>
<ul>
<li>Water: H<sub>2</sub>O</li>
<li>Carbon dioxide: CO<sub>2</sub></li>
<li>Glucose: C<sub>6</sub>H<sub>12</sub>O<sub>6</sub></li>
</ul>Mathematical exponents with superscript
<sup> raises numbers to superscript position, used for exponents and powers in math notation.
<p>Area of a square: A = s<sup>2</sup></p>
<p>Speed of light: c = 3 × 10<sup>8</sup> m/s</p>Footnote reference with superscript
<sup> wrapping a link creates clickable footnote superscripts that jump to the reference list.
<p>The study found a 42% improvement<sup><a href="#fn1">[1]</a></sup>
in user satisfaction after the redesign.
</p>
<ol>
<li id="fn1">Smith et al., UX Research Journal, 2024.</li>
</ol>
Discussion