Superscript and Subscript

To specify the superscript and the subscript text, HTML provides us two tags that are <sup> and <sub>. The superscript content looks in the shorter font and half character over the regular line. Generally, these tags are used to address the footnotes, mathematical equations (such as x2 + y2 = r2), and others.

The subscript content shows in the shorter font, unlike superscript and half character down the regular line. Generally, it can be used for addressing chemical formulas like H2SO4, H2O, and mathematical equations, etc.

The CSS vertical-align attribute is applied to accomplish a similar thing. Subscript and superscript can be specified with the use of CSS also. This CSS attribute describes the text’s vertical alignment.

Now, let’s understand how to accomplish the subscript and superscript with the use of a vertical-align attribute.



Baseline: This value is a default value. It aligns the content to the parent element’s baseline.

Super: This value is superscript. It is used to raise any text.

Sub: This value is subscript. It is used to lower any text.

The content will become subscript and superscript when we apply the sub and super values of this attribute.

Superscript- Example:


CSS Superscript and Subscript

Subscript- Example:


CSS Superscript and Subscript

Pin It on Pinterest

Share This