HTML <sub> Tag – Subscript Text
📌 Introduction
The <sub> tag is used to display subscript text in HTML.
Subscript text appears smaller and slightly below the normal line of text.
It is commonly used in:
- Chemistry formulas
- Mathematical expressions
- Scientific notation
🧱 Syntax
<sub>text</sub>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>Sub Tag Example</title>
</head>
<body>
<p>Water chemical formula: H<sub>2</sub>O</p>
<p>Carbon dioxide: CO<sub>2</sub></p>
</body>
</html>
🖥️ Output Explanation
- The number inside
<sub>appears lower than normal text - It is smaller in size
- Used to represent scientific notation correctly
🎯 When to Use <sub>
Use <sub> for:
- Chemical formulas
- Mathematical expressions
- Footnote references (sometimes)
Example:
<p>E = mc<sub>2</sub></p>
⚖️ <sub> vs <sup>
| Tag | Position | Use |
|---|---|---|
<sub> |
Below text | Chemistry, formulas |
<sup> |
Above text | Powers, exponents |
Example:
<p>H<sub>2</sub> + O<sub>2</sub></p>
<p>x<sup>2</sup> + y<sup>2</sup></p>
🚫 Common Mistakes
- Using
<sub>for normal text formatting ❌ - Using it for layout positioning ❌
- Confusing it with CSS positioning ❌
🎨 Styling <sub>
You can customize it:
<sub style="color: red;">2</sub>
🧪 Mini Exercise
Create a page with:
Chemical formulas:
- H₂O
- CO₂
At least one mathematical expression using
<sub>