sup

The HTML <sup> element marks superscript text, such as an exponent, ordinal suffix, or footnote marker. It gives the raised position meaning instead of only making text smaller.

Basic mathematical example

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

The raised number is an exponent. Use sup when the position is part of the notation’s meaning, not merely because the text should look smaller.

Ordinals and footnotes

<p>This is the 1<sup>st</sup> example.</p>
<p>A claim needs a source.<sup><a href="#note-1">1</a></sup></p>

For footnotes, make the marker a real link to the note and provide a way back when appropriate. A superscript number alone does not create a navigable relationship.

sup and sub are different

sup

Marks text positioned above the baseline, such as an exponent or upper index.

sub

Marks text positioned below the baseline, such as a chemical count or lower index.

<p>Squared: x<sup>2</sup>.</p>
<p>Water: H<sub>2</sub>O.</p>

Do not use sup for visual styling alone

If text only needs a smaller visual treatment, use CSS. The HTML element should explain why the text is raised and how it relates to the surrounding content.

Common mistakes

• Using sup for every small annotation or badge.
• Using it where a lower index needs sub.
• Creating a footnote marker without a link or an associated note.
• Assuming visual positioning alone communicates the meaning in every context.

Related pages

• sub: mark subscript text
• var: mark a variable
• a: create a link
• HTML reference index