HTML <sup> element

The <sup> element represents superscript text. It is used when a part of the text is written higher because that raised position carries meaning.

A common example is an exponent. In x², the raised 2 changes the meaning from x to x squared. This is not decoration; it is part of the expression.

Superscripts are also used for footnote markers, references, ordinal indicators in some writing styles, and certain language-specific abbreviations. The important point is that the raised position should mean something.

The element should not be used just to make text float upward because it looks interesting. If the raised position is only visual, CSS is the better tool.

For larger mathematical expressions, MathML gives a much richer structure. But for simple expressions inside ordinary prose, <sup> is often clear and sufficient.

Use <var> for a variable and <sup> for its exponent, as in the first example. The related <sub> element marks subscripts.

A superscript footnote marker does not create a link to a note by itself. The second example places an <a> inside the superscript and links it to the note's id. A return link takes the reader back to the marker.

Attributes: GLOBALS.

Typical layout:
<p>A square with side length <var>x</var>
  has area <var>x</var><sup>2</sup>.
</p>
<p>The example uses metric units.<sup><a
  id="pf-demo-marker" href="#pf-demo-note"
  aria-label="Footnote 1">1</a></sup></p>
<p id="pf-demo-note">1. Lengths are measured in metres.
  <a href="#pf-demo-marker">Return to the text</a>
</p>

Visual representation: