The <sub> tag lowers text slightly below the normal line and shrinks it — used for chemical formulas and mathematical indices.
Syntax
<sub>lowered text</sub>Basic Example
<p>Water's chemical formula is H<sub>2</sub>O.</p>Browser output: the "2" renders smaller and shifted below the baseline — the standard way chemical formulas are printed.
How It Works
The browser shrinks the font size and shifts the text downward via vertical-align and font-size in its default stylesheet — the mirror image of how <sup> works.
Important Attributes
| Attribute | Purpose |
|---|---|
| — none — | Only universal global attributes apply |
Real-World Example
<p>In algebra, a sequence's terms are often written x<sub>1</sub>, x<sub>2</sub>, x<sub>3</sub>, and so on.</p>Exactly how indexed variable names appear in a math or computer science course's notes.
Common Mistakes
- Overusing
<sub>for general small-text styling that has nothing to do with chemistry or math notation - Nesting too many sub/sup levels, producing text that's genuinely hard to read
Best Practices
- Keep
<sub>content short, exactly like<sup> - Use it only for genuine subscript meaning — chemical formulas, indexed variables, mathematical notation
Accessibility Considerations
Same caveat as <sup> — screen reader announcement of subscript varies, so don't rely on it alone to convey meaning in critical content.
SEO Considerations
No direct ranking effect.
Browser & Modern HTML Notes
Stable and simple, unchanged across HTML versions.
Mini Practice
- Write the chemical formula for carbon dioxide (CO<sub>2</sub>) using
<sub>. - Write a short sequence of indexed variables (x<sub>1</sub>, x<sub>2</sub>) using
<sub>.
