HTML Superscript and Subscript

In HTML, you can use <sup> for superscript and <sub> for subscript. They are suitable for mathematical expressions, chemical formulas, footnote markers, and other cases where the text baseline needs to be adjusted.

Superscript: <sup>

Superscript displays content above the normal text line.

A<sup>A</sup>

Rendered output: A^A

Common example:

x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup>

Rendered output: x² + y² = z²

Subscript: <sub>

Subscript displays content below the normal text line.

A<sub>A</sub>

Rendered output: A_A

Common example:

H<sub>2</sub>O

Rendered output: H₂O

Usage Recommendations

HTML tags are not case-sensitive in ordinary HTML documents, so <SUB> will usually also render as subscript. However, for consistent code style and alignment with modern HTML conventions, it is recommended to use lowercase: <sub> and <sup>.

If you only want to adjust text position for visual effect, you can also use CSS. But if the content itself is truly superscript or subscript, such as an exponent or a number in a chemical formula, using <sup> and <sub> directly is clearer.