A maths class writes a power, x2, where the 2 needs to appear slightly raised to mean "x squared" rather than "x followed by 2". A blog post places a small number after a sentence to point to a footnote. An ordinal date is written "2nd of March" or "3rd of April", with those letters traditionally raised in some typographic conventions.
Three uses, one thing in common: the raised text carries a precise meaning, never a plain stylistic effect. That is the role of <sup>, which follows exactly the same logic as its twin tag <sub>, only upward instead of downward.
Definition
<sup> wraps text that needs to display as a superscript, slightly above the baseline and usually at a reduced size, because that position is part of the meaning of the notation: a mathematical power, a footnote reference, an ordinal abbreviation.
Like <sub>, this tag never stands for text simply raised for appearance. If the shift changes nothing about the meaning of the sentence, the tag is not the right answer, a point picked up again below.
Syntax and minimal markup
It is an inline element with no attribute of its own beyond the global ones. It usually wraps a single character or a very short fragment of text, never a whole sentence.
<p>The area of a square with side a is a<sup>2</sup>.</p>Concrete example
Here are three classic uses: a mathematical power, a footnote reference, and an ordinal abbreviation.
<p>Energy is calculated with E = mc<sup>2</sup>.</p>
<p>This practice has existed for a long time<sup><a href="#note-1">1</a></sup>.</p>
<p>Your course starts on the 3<sup>rd</sup> of September.</p>In the footnote reference, the superscript wraps a link to the note itself: that link is what makes the reference actually navigable, the superscript only gives it the presentation expected by editorial convention.
Difference with CSS vertical-align
The CSS property vertical-align: super produces the same visual shift as the tag, with exactly the same risk of confusion as <sub>.
<sup> | CSS vertical-align: super | |
|---|---|---|
| What it expresses | A superscript that is part of the notation's meaning | Nothing, a plain visual shift applicable to any text |
| To a screen reader | May be conveyed as a superscript depending on the software | No difference from the surrounding text |
| Good use | Power, footnote reference, ordinal | Shifting a decorative element unrelated to a notation |
Writing E = mc2 with a plain CSS shift produces the right look without carrying the meaning: a search engine or a formula-extraction tool loses the information that this 2 is a power and not just a digit tacked on after the c. Conversely, applying <sup> to a badge or an icon to make it float higher misuses the tag with no benefit at all to the meaning of the content.
Raising ordinal suffixes such as "2nd" or the French "2e" stays a typographic habit, not an accessibility requirement: some screen readers spell out the superscript letter by letter, which can make it more confusing to hear than to read. If you use it, at least make sure the number and its ending never split apart at a line break.
Best practices and a common trap
Reserve <sup> for cases where the superscript carries real information: powers, footnote references, ordinals following the typographic convention in use. The most common trap, identical to the one seen with <sub>, is reaching for it purely for visual effect, for instance to float a "new" badge at the corner of a button with no connection to a notation, which misleads assistive technology without giving anything back.
For an elaborate mathematical formula stacking several levels of superscripts and subscripts, <math> becomes better suited than <sup> alone, which stays reserved for simple, isolated notations.
Frequently asked questions
Should ordinal suffixes always be raised as a superscript, like "2nd"?
It is not a requirement, only a typographic convention inherited from print. Many sites apply it out of visual habit, but nothing stops writing "2nd" as plain text, a choice sometimes safer for accessibility, as the note above explains.
Can <sup> be used for a "New" badge placed at the corner of a button?
No, that badge has no connection to a superscript notation, its positioning belongs entirely to CSS, with position: absolute or an equivalent property. <sup> stays reserved for powers, footnote references and ordinals.
Can <sup> and <sub> be used together in the same formula?
Yes, nothing prevents it, for instance to write a number that is both indexed and raised to a power. Beyond two or three levels, the readability of the raw HTML degrades quickly, and a notation that complex is then better served by a dedicated language such as <math> rather than a stack of <sup> and <sub> tags.