**`<sup>`** shifts its content above the normal text baseline, matching the typographic convention for superscript. Common uses include mathematical exponents (x<sup>2</sup>), ordinal number suffixes (1<sup>st</sup>, 2<sup>nd</sup>), and footnote reference markers that link to a note elsewhere on the page.
1Understanding <sup>
`<sup>` shifts its content above the normal text baseline, matching the typographic convention for superscript. Common uses include mathematical exponents (x<sup>2</sup>), ordinal number suffixes (1<sup>st</sup>, 2<sup>nd</sup>), and footnote reference markers that link to a note elsewhere on the page.
For footnote markers, pair <sup> with an actual link (<a href="#footnote-1">) so keyboard and screen reader users can navigate to the note, not just see a raised number.
<p>Einstein's famous equation is E = mc<sup>2</sup>.</p>2Practical Example
Here is a real-world application of <sup> showing how it is used in production HTML.
<!-- Footnote reference marker as a navigable link -->
<p>This claim needs verification.<sup><a href="#fn1">1</a></sup></p>
<p id="fn1">1. Source: Example Journal, 2026.</p>3Best Practices
Follow these guidelines when working with <sup>:
1. Use <sup> for exponents, ordinal suffixes, and footnote markers
2. Wrap footnote markers in a link so they're navigable, not just visually raised
3. Avoid using it purely for decorative raised text unrelated to these conventions
Tip: For footnote markers, pair <sup> with an actual link (<a href="#footnote-1">) so keyboard and screen reader users can navigate to the note, not just see a raised number.
<p>Einstein's famous equation is E = mc<sup>2</sup>.</p>