The <sup> tag raises text slightly above the normal line and shrinks it — used for exponents, ordinal suffixes, and footnote markers.
Syntax
<sup>raised text</sup>Basic Example
<p>The area of a square is x<sup>2</sup>.</p>
<p>This is CodingNow's 1<sup>st</sup> batch of the year.</p>Browser output: the "2" and "st" both render smaller and raised above the baseline — exactly how exponents and ordinal suffixes look in print.
How It Works
The browser shrinks the font size and shifts the text upward via vertical-align and font-size in its default stylesheet.
Important Attributes
| Attribute | Purpose |
|---|---|
| — none — | Only universal global attributes apply |
Real-World Example
<p>
Machine learning fundamentals<sup><a href="#fn1">1</a></sup>
are covered in Module 3.
</p>
<p id="fn1">1. See the official curriculum PDF for full details.</p>A footnote reference marker linking down to its explanation — a common pattern on documentation and academic-style pages.
Common Mistakes
- Using
<sup>for general small/raised styling unrelated to its real math, ordinal, or footnote use cases - Making footnote markers plain (non-clickable) text instead of wrapping them in a real
<a href="#...">link inside the<sup>
Best Practices
- Keep
<sup>content short — usually a single character or a couple of digits - For footnotes, use a real, navigable anchor link inside the
<sup>, not just styled text
Accessibility Considerations
Screen reader behavior for superscript varies — some announce "superscript," some just read the text normally. For footnote markers specifically, don't rely on <sup> alone to convey the connection; a real link with clear surrounding text is more reliable.
SEO Considerations
No direct ranking effect.
Browser & Modern HTML Notes
Stable and simple — behavior hasn't changed across HTML versions.
Mini Practice
- Write a short math formula using
<sup>for an exponent. - Add a footnote reference to a paragraph, linking down to a footnote at the bottom of the page.
