<sup>

<sup> marks text conventionally set as a superscript, such as an exponent or footnote marker. It usually displays smaller text above the baseline.

An exponent and a note

The formula is explained in prose. The footnote marker is an actual link to a real note in the same document.

<p>
  A square with side length <var>s</var> has area <var>s</var><sup>2</sup>: side
  length multiplied by itself.
</p>
<p>
  Use a consistent unit.<sup><a href="#note" aria-label="Note 1">1</a></sup>
</p>
<p id="note">
  1. If the sides are measured in meters, the area is in square meters.
</p>

sup {
  font-size: 0.75em;
}

Content and accessibility

Sup accepts phrasing content and global attributes. A visual baseline change does not guarantee spoken mathematical meaning, so explain notation and consider MathML for complex formulas.

A note marker needs a useful accessible link name and a valid target; superscript styling alone does not create a footnote relationship. Do not nest sub inside sup just to make the marker smaller.

Appearance alone

Use CSS vertical-align for an arbitrary raised logo or design effect. Change the font-size in the editor and verify that the expression and note still make sense. Use sub for conventional subscripts.

Sources and browser support

MDN: sup describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.