HTML – The Subscript Tag

Definition and Usage

The sub tag represents subscript inline text.

Usage Notes

Most browsers render it as smaller text positioned below the baseline.
The  tag is not intended for purely visual or decorative purposes.
It should be used to follow typographical conventions, such as representing footnote markers, variable indices, or chemical formulas that are conventionally written as subscripts.
Use this tag only when it clarifies the intended meaning of the content.

Usage Examples

The tag should be used to convey semantic meaning following typographical rules or conventions, such as footnote numbers, variable subscripts, or subscripts in chemical formulas.

Using as Footnote Numbers

Traditionally, footnotes are indicated using numbers displayed as subscripts. This is a common use case for the  tag.

Footnotes are notes placed at the bottom of a page in books or academic papers to provide additional information or citations.
Source - Wikipedia: Footnote

HTML

<p>
    According to a recent study by Smith, Johnson, and Lee<sub><a href="#footnote1">1</a></sub>,
    the discovery of a new material is
    expected to significantly advance energy storage technology.
</p>
<footer>
    <p id="footnote1">
        Footnote 1: For more details on the study
        by Smith, Johnson, and Lee, refer to the original paper.
    </p>
</footer>

Using as Variable Subscripts

In mathematics, a variable subscript is used to assign different indices or numbers to the same base variable to represent multiple related variables.

Using in Chemical Formulas

Note:
The  tag is not limited to representing only footnote numbers, variable subscripts, or chemical formulas as shown in the examples. It can be used for any subscript content according to typographical rules or conventions.

Precautions

The  tag should be used to convey semantic meaning, such as footnote numbers, variable subscripts, or subscripts in chemical formulas, according to typographical rules or conventions. It is not intended solely for visual styling or decorative purposes, and should only be used when it clarifies such meaning in the content.

Let's revisit the "Using as Variable Subscripts" example. Without the  tag, the intended meaning would change.

Now, let's see the same markup without the  tag:

In this case, the meaning is altered. "x1, ..., xn" is interpreted as a simple string of characters rather than a mathematical notation indicating variable indices. Using subscripts conveys specific semantic meaning, which is important.

One might argue that this is merely a styling issue, but considering web accessibility and screen readers, it is more than just a visual problem — the semantic meaning is actually lost.

The following example uses  styled with CSS to visually mimic subscripts without using the  tag:

HTML Visual styling only; semantic meaning lost

<p>
    The horizontal positions along the X-axis are represented as
    x<span style="vertical-align: sub; font-size: 0.75em;">1</span>, ..., 
    x<span style="vertical-align: sub; font-size: 0.75em;">n</span>.
</p>

CSS rem and em Units

Do not use CSS styling to replace the  tag solely for visual purposes. Even if it is only for display or decorative styling, the semantic meaning will be altered.

Visually, this may look like proper mathematical notation, but it is not the recommended markup. HTML should be used not only for visual styling but also to support accessibility, including screen readers and assistive technologies. Additionally, HTML provides tags with specific semantic meanings, so it is recommended to use the most appropriate tag for the content.