The HTML <sup> tag
Quick answer
The HTML <sup> element renders text as superscript — raised and smaller — for meanings that require it, such as exponents (x2), ordinals (1st) and footnote references. Use it semantically, not for decoration.
Overview
The <sup> element renders text as superscript — raised and reduced in size — where that position is meaningful. Typical uses include mathematical exponents (E = mc2), ordinal suffixes (the 4th), trademark and footnote markers.
It is the counterpart of <sub> (subscript). Reserve it for superscripts that carry meaning rather than for decoration — an exponent genuinely changes the value being expressed.
For purely stylistic raising of text, use the CSS vertical-align and font-size properties instead of <sup>.
Syntax
<p>E = mc<sup>2</sup></p>Example
<p>The 1<sup>st</sup> law and E = mc<sup>2</sup>.</p>Best practices
- Use
<sup>for meaningful superscripts — exponents, ordinals, trademark and footnote markers. - Pair it conceptually with <sub> for subscripts.
- Do not use it for purely visual raising — use CSS vertical-align for that.
- For complex equations, the <math> element (MathML) is more appropriate.
Frequently asked questions
What is the sup element for?
To render meaningful superscript text — exponents, ordinal suffixes, trademark symbols and footnote links.
How do I write an exponent like x squared in HTML?
Put the exponent in a
<sup>: x<sup>2</sup> renders as x2.What is the difference between sup and sub?
<sup> raises text (superscript); <sub> lowers it (subscript).Should I use sup for footnotes?
Yes — a superscript footnote marker, usually wrapping a link to the note, is a valid and common use.