<sup> Superscript
Superscript text, set above the line, as in exponents or 1st.
<sup> renders text as superscript, raised and smaller. Exponents (x2), ordinal suffixes in some languages and footnote markers are what it is for.
Decoration is not. A footnote marker should normally be a link to the note, so readers can jump there. Complex formulas are better off in MathML.
The WHATWG section on sub and sup (opens in a new tab) defines both elements. For real formulas, the math element fits better.
Syntax
x<sup>2</sup>When to use it
<sup> covers characters that convention raises above the line: units such as m2 on a property listing, exponents in a math note, footnote markers in an essay, or abbreviations like the French "Mlle", where the raised letters are part of the correct spelling.
Some symbols already exist as characters and need no sup: write ™ for the trademark sign and ® for the registered sign rather than raising the letters TM. Squared and cubed signs also exist as entities (², ³), but sup works for any exponent. For full equations, use MathML.
The standard says sup is only for conventions with a specific meaning, not for raising text because it looks nice. English ordinals such as 1st and 22nd are normally written on the line, so leave them as plain text unless your house style requires superscript. Badges, notification counts and "New" labels are design, so build them with CSS.
Live example
Edit the code and watch the preview.
<p>The area is 4 m<sup>2</sup>.</p>
<p>E = mc<sup>2</sup><a href="#note1"><sup>1</sup></a></p>More examples
Footnote with a link back
A footnote marker in sup links to the note at the bottom of the page, and the note links back to the text. The ids connect the two, so readers can jump in both directions.
<p>Pancakes date back thousands of years.<sup><a href="#fn1" id="ref1">1</a></sup></p>
<h2>Notes</h2>
<ol>
<li id="fn1">Early forms were cooked on hot stones. <a href="#ref1">Back to text</a></li>
</ol>Units and abbreviations
Area and volume units raise the exponent, and some French abbreviations raise their final letters. In both cases the raised position is part of the correct written form. Written on the line, m2 could be mistaken for a typo or a model number.
<p>Kitchen: 12 m<sup>2</sup>. Fridge: 0.3 m<sup>3</sup>.</p>
<p lang="fr">Bienvenue, M<sup>lle</sup> Dupont.</p>Tip: Link each footnote marker to its footnote.
Browser support
Like sub, sup arrived in HTML 3.2 and works in every browser. The default style is vertical-align:super with a smaller font size, which can push lines apart slightly. The ² and ³ entities are an alternative for squares and cubes.
Accessibility
Screen readers usually ignore superscript, so x squared written with sup may come out as x2. Where the meaning matters, add context in the text. The W3C note Understanding Info and Relationships (opens in a new tab) applies any time meaning depends on position.
Common mistakes
Wrong
<sup>NEW</sup> ProductRight
<span class="badge">NEW</span> Productsup is for typographic superscripts. Badges and decoration belong in CSS.
Frequently asked questions
How do I write an exponent like x squared in HTML?
Put <sup> around the exponent: x<sup>2</sup>. The same element handles ordinals in some languages, such as the French 1<sup>er</sup>, and footnote markers. Full mathematical formulas come out better in MathML with <math> and <msup>, because browsers lay it out properly and screen readers can speak it as math.
How do I make accessible footnotes with sup?
Place a link inside the superscript that points at the note, for example <sup><a href="#fn1" id="ref1">1</a></sup>, and add a back link from the footnote to #ref1. A lone digit tells a screen reader user very little, so give the link an accessible name like aria-label="Footnote 1". Footnote conventions are explained in Wikipedia's article on notes in typography (opens in a new tab).