sub

The HTML <sub> element marks subscript text, such as the number in a chemical formula or a mathematical index. It gives the position meaning instead of only making text smaller.

Basic chemical formula

<p>Water is written as H<sub>2</sub>O.</p>

The number is part of the formula and is conventionally written below the baseline. The surrounding text should still make the formula understandable when the visual position is not obvious.

Mathematical notation

<p>The sequence uses a<sub>n</sub> for its nth term.</p>

Use sub when the notation’s meaning includes a lower index. Do not use it just to make an ordinary note or label appear smaller.

sub and sup are different

sub

Marks text positioned below the baseline, such as a chemical count or lower index.

sup

Marks text positioned above the baseline, such as an exponent or ordinal suffix.

<p>Carbon dioxide: CO<sub>2</sub>.</p>
<p>Squared: x<sup>2</sup>.</p>

Do not use sub for visual styling alone

If a label should simply be smaller, use CSS and keep the text in its normal semantic structure. The HTML element should communicate why the text is positioned as subscript.

Common mistakes

• Using sub for every small annotation or footnote.
• Using it where an exponent or upper index needs sup.
• Forgetting to explain a specialized formula in surrounding text.
• Assuming visual positioning alone makes the meaning accessible in every context.

Related pages

• charset: declare the document encoding
• var: mark a variable
• code: mark a code fragment
• HTML reference index