The HTML <sub> tag
The HTML <sub> element renders text as subscript (lowered and smaller) for meanings that require it, such as chemical formulas (H2O) and mathematical indices. Use it semantically, not for decoration.
Overview
The <sub> element renders text as subscript (lowered and reduced in size) where that position carries meaning. The genuine use cases are specific: chemical formulas such as H2O, mathematical and variable notation, and certain footnote markers.
It is the counterpart of <sup> (superscript). Reserve it for cases where subscript changes the meaning. In chemistry, "CO2" and "CO2" are not interchangeable.
Do not use it merely to make text small and low for visual effect; that is a presentation concern best handled with the CSS vertical-align and font-size properties.
Syntax
<p>Water is H<sub>2</sub>O.</p>Example
<p>The formula for water is H<sub>2</sub>O and carbon dioxide is CO<sub>2</sub>.</p>Best practices
- Use
<sub>where subscript is meaningful: chemical formulas, math notation, some footnotes. - Pair it conceptually with <sup> for superscripts.
- Do not use it for purely visual lowering; use CSS vertical-align for that.
- For complex equations, consider the <math> element (MathML).
Frequently asked questions
What is the sub element for?
How do I write a chemical formula like H2O in HTML?
<sub>: H<sub>2</sub>O renders as H2O.What is the difference between sub and sup?
<sub> lowers text (subscript); <sup> raises it (superscript).