Subscript and Superscript

Learn how to display characters below or above the normal text line using the HTML <sub> and <sup> elements.

Introduction

HTML provides two special text formatting elements for positioning characters relative to the normal text line.

• <sub> displays subscript text.
• <sup> displays superscript text.

The <sub> Element

The <sub> element displays text as subscript, which means the text appears slightly below the normal text line.

Syntax

<sub>Text</sub>

Example

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

Output

Common Uses of <sub>

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

<p>
    CO<sub>2</sub>
</p>

<p>
    x<sub>1</sub>
</p>

<p>
    a<sub>n</sub>
</p>

The <sup> Element

The <sup> element displays text as superscript, which means the text appears slightly above the normal text line.

Syntax

<sup>Text</sup>

Example

<p>
    x<sup>2</sup>
</p>

Output

Common Uses of <sup>

<p>
    x<sup>2</sup>
</p>

<p>
    x<sup>3</sup>
</p>

<p>
    10<sup>6</sup>
</p>

<p>
    1<sup>st</sup>
</p>

<sub> vs <sup>

Combining Subscript and Superscript

Both elements can be used together when the notation requires both lower and upper positioning.

<p>
    X<sub>1</sub><sup>2</sup>
</p>

Mathematical Examples

Chemical Formula Examples

Example 🌍👨‍🏫

<h2>
    HTML Examples
</h2>

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

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

<p>
    Area of a square:
    a<sup>2</sup>
</p>

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

CSS and Default Appearance

Browsers provide a default visual style for <sub> and <sup>. CSS can be used when a different appearance is required.

<span class="custom-sup">
    2
</span>

<style>

    .custom-sup {
        position: relative;
        top: -0.5em;
        font-size: 75%;
    }

</style>

Important Points

• <sub> places content below the normal text line.
• <sup> places content above the normal text line.
• Subscript is commonly used in chemical formulas and indices.
• Superscript is commonly used in exponents and ordinal notation.
• CSS can be used for custom visual styling.

Common Mistakes

• Using <sub> when text should actually be superscript.
• Using <sup> for chemical formulas.
• Forgetting that the element represents actual text positioning and meaning.
• Using CSS positioning when the semantic HTML element already represents the intended meaning.

Practice Exercise

1. Write H₂O using HTML.
2. Write CO₂ using HTML.
3. Write x².
4. Write x³.
5. Write x₁ and x₂.
6. Create a page containing at least three chemical formulas and three mathematical expressions.