HTML provides two useful elements for displaying text below or above the normal text line: <sub> and <sup>. The <sub> element creates subscript text, while the <sup> element creates superscript text.

These elements are commonly used for chemical formulas, mathematical expressions, powers, footnotes, dates, and other content where text needs to appear slightly below or above the normal text.

What Is HTML Subscript?

The HTML <sub> element defines subscript text. Subscript text appears slightly below the normal text line and is usually displayed in a smaller font size.

For example, H₂O represents the chemical formula for water.

The number 2 is placed below the normal text.

HTML Subscript Syntax

The basic syntax is:

_{Subscript Text}

For example:

<p>Water is H₂O.</p>

Here, the number 2 is displayed as subscript.

Subscript Examples

Subscript is commonly used in chemical formulas.

For example:

<p>Carbon dioxide is CO₂.</p>

Another example is:

<p>Sulfuric acid is H₂SO₄.</p>

These examples make chemical formulas easier to represent correctly in HTML.

What Is HTML Superscript?

The HTML <sup> element defines superscript text. Superscript text appears slightly above the normal text line and is usually displayed in a smaller font size.

For example, x² represents x squared.

HTML Superscript Syntax

The basic syntax is:

^{Superscript Text}

For example:

<p>2³ = 8</p>

Here, the number 3 appears above the normal text.

Superscript Examples

Superscript is commonly used for mathematical powers.

For example:

<p>x² + y² = z²</p>

It can also be used for ordinal numbers:

<p>He finished 1^st in the competition.</p>

Another common use is for footnote references:

<p>This information is explained in more detail later.¹</p>

Subscript vs Superscript

The main difference between <sub> and <sup> is their position.

Element	Purpose	Position	Example
<sub>	Subscript text	Below the text line	H<sub>2</sub>O
<sup>	Superscript text	Above the text line	x<sup>2</sup>

Use <sub> when the text needs to appear below the normal line and <sup> when it needs to appear above it.

Using Subscript and Superscript Together

You can use both elements in the same HTML document.

<!DOCTYPE html>
<html>
<head>
  <title>HTML Subscript and Superscript</title>
</head>

<body>

  <h1>HTML Subscript and Superscript</h1>

  <p>Water: H<sub>2</sub>O</p>

  <p>Carbon dioxide: CO<sub>2</sub></p>

  <p>Square: x<sup>2</sup></p>

  <p>Cube: x<sup>3</sup></p>

</body>
</html>

The browser positions the subscript and superscript text automatically.

Subscript and Superscript with CSS

You can customize the appearance of these elements with CSS.

<style>
  sub {
    color: blue;
  }

  sup {
    color: red;
  }
</style>

<p>H<sub>2</sub>O</p>
<p>x<sup>2</sup></p>

CSS can change properties such as color, font size, and other visual styles.

However, you should use <sub> and <sup> because of the meaning and position of the content, rather than simply using them to make text smaller or move it visually.

Subscript and Superscript in Mathematics

Superscript is frequently used to represent powers and exponents.

For example:

x²

x³

10⁵

A complete example is:

<p>Area of a square = a²</p>

Subscript can also be used when mathematical notation requires it.

For example:

x₁ + x₂ = x₃

Subscript and Superscript in Science

Subscript is particularly important for representing chemical formulas.

Examples include:

Formula	HTML Representation
H₂O	H<sub>2</sub>O
CO₂	CO<sub>2</sub>
O₂	O<sub>2</sub>
H₂SO₄	H<sub>2</sub>SO<sub>4</sub>

Superscript can also be used for scientific notation.

For example:

<p>3 × 10⁸ m/s</p>

This represents the approximate speed of light in a vacuum.

Common Mistakes

One common mistake is using <sub> or <sup> simply to change the visual position of ordinary text.

For example, if you only want smaller text, use CSS or <small> rather than <sub>.

The <sub> and <sup> elements should be used when the content actually has a subscript or superscript meaning.