🔽 HTML <sub> Tag — Subscript Text for Chemical and Mathematical Notations
The <sub> tag in HTML is used to display subscript text, which appears slightly below the normal line of text. It’s commonly used in scientific, mathematical, and chemical formulas to represent elements like chemical compounds, mathematical indices, or footnotes.
📌 What Is the <sub> Tag?
- The
<sub>element makes its content rendered as subscript (smaller and lowered). - It is an inline element — it does not break the flow of text.
- Helps with semantic clarity for formulas and annotations.
✅ Basic Syntax
<p>Water is represented as H<sub>2</sub>O.</p>
This renders as:
Water is represented as H₂O.
🧪 Example 1: Chemical Formulas
<p>The formula for carbon dioxide is CO<sub>2</sub>.</p>
🧪 Example 2: Mathematical Indices
<p>The sequence a<sub>n</sub> converges as n approaches infinity.</p>
🧪 Example 3: Footnotes or References
<p>Some text with a reference<sub>1</sub>.</p>
🎨 Styling <sub>
Browsers automatically display subscript smaller and lowered. You can adjust with CSS if needed:
sub {
font-size: 0.8em;
vertical-align: sub;
}
⚠️ Accessibility Tips
- Use
<sub>only for true subscript content. - Avoid using
<sub>purely for styling—use CSS for visual effects if the content is not semantically subscript.
🔁 <sub> vs <sup>
| Tag | Purpose |
|---|---|
<sub> | Subscript (lowered text) |
<sup> | Superscript (raised text) |
🏁 Summary
The <sub> tag is essential for correctly marking subscript text in documents, making chemical formulas, math notations, and references clear and semantically correct.