HTML <sup> Tag – Superscript Text
📌 Introduction
The <sup> tag is used to display superscript text in HTML.
Superscript text appears smaller and slightly above the normal line of text.
It is commonly used in:
- Mathematical exponents
- Powers
- Footnotes
- Scientific notation
🧱 Syntax
<sup>text</sup>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>Sup Tag Example</title>
</head>
<body>
<p>x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup></p>
<p>10<sup>3</sup> = 1000</p>
</body>
</html>
🖥️ Output Explanation
- Text inside
<sup>appears above normal text - It is smaller in size
- Used for mathematical and scientific notation
🎯 When to Use <sup>
Use <sup> for:
- Exponents (powers)
- Mathematical formulas
- Footnotes
- Scientific expressions
Example:
<p>E = mc<sup>2</sup></p>
⚖️ <sup> vs <sub>
| Tag | Position | Use |
|---|---|---|
<sup> |
Above text | Powers, exponents |
<sub> |
Below text | Chemistry formulas |
Example:
<p>H<sub>2</sub>O and x<sup>2</sup></p>
🚫 Common Mistakes
- Using
<sup>for layout ❌ - Using it just to move text upward ❌
- Confusing it with CSS positioning ❌
🎨 Styling <sup>
You can style it:
<sup style="color: blue;">2</sup>
🧪 Mini Exercise
Create a page with:
Mathematical formulas:
- x² + y² = z²
- 5³ = 125
A footnote example using
<sup>