Tag sup

The <sup> tag in HTML is used to display superscript text, which appears slightly above the normal line of text. It is commonly used in scientific formulas, mathematical expressions, footnotes, and copyright marks.

📌 What Is the <sup> Tag?

  • The <sup> element makes its content rendered as superscript (smaller and raised).
  • It is an inline element and does not break the text flow.
  • Provides semantic meaning to superscript content for clarity and accessibility.

✅ Basic Syntax

<p>E = mc<sup>2</sup></p>

This renders as:
E = mc²

🧪 Example 1: Mathematical Exponents

<p>The area of a square is s<sup>2</sup>.</p>

🧪 Example 2: Footnotes and References

<p>This is a statement with a footnote<sup>1</sup>.</p>

🧪 Example 3: Copyright Symbol

<p>© 2025 Company Name<sup>®</sup></p>

🎨 Styling <sup>

Browsers style <sup> by default with smaller font size and raised vertical alignment, but you can customize:

sup {
  font-size: 0.7em;
  vertical-align: super;
  color: gray;
}

⚠️ Accessibility Tips

  • Use <sup> only for semantically correct superscript text.
  • Avoid using it purely for styling — CSS should be used if semantics don’t apply.

🔁 <sup> vs <sub>

TagPurpose
<sup>Superscript (raised text)
<sub>Subscript (lowered text)

🏁 Summary

The <sup> tag is essential for marking superscript text in documents, improving readability and semantic meaning in formulas, references, and trademarks.