👀 Live Preview
Exponent notation with superscript power:
23 = 8
HTML <sup> Tag
Overview
What You’ll Learn
The <sup> tag renders superscript text above the baseline. This guide covers syntax, exponents, ordinal numbers, footnotes, sup vs sub, accessibility, and best practices for beginners.
Superscript Text
Text above the baseline.
Exponents
23 and power notation.
Ordinal Numbers
1st, 2nd, 3rd.
Core Syntax
Inline opening and closing tags.
sup vs sub
Above vs below baseline.
Best Practices
Semantic, accessible markup.
Fundamentals
What Is the <sup> Tag?
The <sup> tag is an HTML element used to render text in a superscript style. Superscripted text appears slightly above the baseline and is commonly used for exponents, ordinal suffixes, footnote markers, and chemical charges.
Valid HTML5 — Superscript Semantics
Use sup when characters genuinely belong above the line, such as the 3 in 23. For subscript (below the line), use <sub> instead.
The sup element is inline and flows naturally inside paragraphs, headings, and other text content without breaking the line.
Foundation
📝 Syntax
Enclose the superscript content within opening and closing sup tags:
syntax.html
<sup>Your superscripted text here</sup>Exponent Example
exponent.html
<p>2<sup>3</sup> is equivalent to 2 * 2 * 2.</p>Syntax Rules
supis phrasing content — use inline inside block elements likeportd.- Self-closing syntax (
<sup />) is not valid in HTML. - Wrap only the characters that belong in superscript, not entire words unless appropriate.
- For complex math, consider MathML or dedicated math libraries in advanced projects.
Cheat Sheet
⚡ Quick Reference
| Topic | Code Snippet | Notes |
|---|---|---|
| Basic sup | <sup>...</sup> | Superscript |
| Exponent | 2<sup>3</sup> | Powers |
| Ordinal | 1<sup>st</sup> | Ranking |
| vs sub | sup = above | sub = below |
| Footnotes | <sup>1</sup> | Standard convention |
| Browser support | Universal | All browsers |
Comparison
⚖️ <sup> vs <sub>
| Element | Position | Common uses |
|---|---|---|
<sup> | Above baseline (superscript) | 23, 1st, footnote1 |
<sub> | Below baseline (subscript) | H2O, A1, CO2 |
| Appearance | Both smaller than surrounding text | Browser default typography |
| Footnotes | sup is standard | sub for true subscript only |
Reference
🧰 Attributes
The <sup> tag has no tag-specific attributes. Combine it with global attributes for styling when needed.
attributes.html
<p>This is normal text<sup class="small-text" style="color: #007bff;">styled superscript</sup> in a sentence.</p>class / id GlobalHook for CSS targeting superscript styling in formulas or footnotes.
class="superscript"style GlobalInline font-size or color tweaks for footnote markers.
style="color: #007bff"title OptionalTooltip explaining a superscript symbol or footnote reference.
title="Footnote 1"lang OptionalDeclare language when superscript text differs from the page.
lang="en"Hands-On
Examples Gallery
Exponents, ordinal numbers, and footnote markers with copy-ready code and live previews.
📚 Common Use Cases
Use <sup> for exponents, ordinal suffixes, footnote markers, and any text that belongs above the baseline.
Mathematical Notations
The sup tag is commonly employed in mathematical expressions to denote exponents or powers:
mathematical-notations.html
<p>2<sup>3</sup> is equivalent to 2 * 2 * 2.</p>Ordinal Numbers
Use the sup tag to display ordinal suffixes in a visually distinct manner:
ordinal-numbers.html
<p>The 1<sup>st</sup>, 2<sup>nd</sup>, and 3<sup>rd</sup> places.</p>Footnotes
Enhance readability by placing footnote reference numbers in superscript:
footnotes.html
<p>This is a sentence with a footnote<sup>1</sup>.</p>A11y
♿ Accessibility
- Use sup semantically — Apply it only when content belongs in superscript form.
- Ensure readability — Superscript text should remain legible at default or slightly reduced size.
- Provide context — Surrounding text should make the meaning of superscripts clear.
- Link footnotes when possible — For footnote markers, consider linking
supto the corresponding note withidandhref.
🧠 How <sup> Works
1
Author wraps superscript text
Characters that belong above the baseline go inside sup.
Markup
2
Browser raises typography
Default styles render text smaller and above the baseline.
Display
3
Notation reads correctly
23 and 1st display with proper scientific and typographic convention.
UX
=
Precise superscript presentation
Mathematical, ordinal, and footnote content is visually accurate and semantically correct.
Compatibility
Browser Support
The <sup> tag is supported in all major browsers, including Internet Explorer.
Baseline · HTML4 / HTML5
Superscript everywhere
All browsers render <sup> with superscript typography by default.
100% Core tag support
Google Chrome Fully supported
Full supportMozilla Firefox Fully supported
Full supportApple Safari Fully supported
Full supportMicrosoft Edge Fully supported
Full supportInternet Explorer Fully supported · EOL
Full supportOpera Fully supported
Full support<sup> tag 100% supported
Bottom line: Use <sup> confidently for superscript text in any browser.
Wrap Up
Conclusion
Mastering the <sup> tag helps you present superscripted text with precision. Whether writing exponents, ordinal numbers, or footnotes, sup enhances visual clarity and semantic accuracy in your HTML documents.
Pro Tips
💡 Best Practices
✅ Do
- Use
supfor genuine superscript content like 23 - Use
supfor footnote reference numbers - Combine with appropriate text elements for semantic markup
- Use
subfor subscript and chemical formula indices
❌ Don’t
- Use
supfor decorative positioning without meaning - Wrap entire sentences in
sup - Use
supwhensubis the correct notation - Overuse superscript — it can clutter readability
Summary
Key Takeaways
Knowledge Unlocked
Six truths every developer should know about <sup>
Bookmark these before you write superscript text on your pages.
6
Core concepts 01
Superscript
Above baseline.
Purpose 02
23
Exponents.
Use case 03
1st
Ordinals.
Pattern 04
vs sub
Above vs below.
Comparison 05
Semantic
Meaningful use.
A11y 06
100% Support
All browsers.
Compatibility❓ Frequently Asked Questions
It renders superscript text above the baseline for exponents, ordinal suffixes, and footnote markers.
sup places text above the baseline. sub places text below it, such as chemical formula indices.No. Use global attributes like
class, id, and style.Yes. Footnote reference numbers are typically written with
sup, for example: This sentence1.Yes. Full support in every major browser including Internet Explorer.
Write superscript notation
Practice <sup> for exponents, ordinals, and footnotes in the Try It editor.
About the author
6 people found this page helpful