HTML Superscript Generator

Create exponents, ordinals and footnote markers with the sup element or a CSS shift.

Superscript HTMLsup element
E = mc<sup>2</sup>
Runs locally in your browser

About the HTML Superscript Generator

Superscript raises characters above the baseline for exponents, ordinal endings such as the th in 4th, trademark marks and footnote numbers. The sup element does that semantically, and this builder joins your leading text, the raised part and any trailing text into one snippet ready to paste, which saves fiddling with opening and closing tags in the middle of a sentence.

Switch on footnote mode and the raised number becomes a link pointing at an item in an ordered list below, with a matching identifier on the reference so the reader can jump down to the note and then back to where they were. That two way pairing, an id on the marker and an id on the note, is what makes footnotes usable with a keyboard rather than only with a mouse and a scrollbar.

The CSS route sets vertical-align: super on a span, which is right for decorative lifts where no exponent is meant. Avoid it for real formulas, because copying the text loses the relationship between base and power entirely and the meaning goes with it. Characters that belong below the baseline are handled by the HTML Subscript Generator, and the HTML Formatter will lay out the surrounding paragraph.

How to use

  1. Enter the base text, then the characters that should be raised.
  2. Add trailing text if the raised part sits in the middle of a phrase.
  3. Tick footnote to turn the marker into a two way link.
  4. Copy the snippet and the footnote list if you generated one.

Common questions

How do I write an exponent in HTML?
Put the power inside a sup element directly after the base, with no space between them.
What markup suits footnote numbers?
A sup element containing a link to the note, and an id on the marker so the note can link back.
Should ordinals use sup?
It is a style choice. Many publications now set ordinals inline because raised endings can be harder to read at small sizes.
Does sup change the font size?
Browsers apply a smaller size by default. You can override it with CSS if the result looks too faint.