Renders text in superscript position

Definition and Usage

The  element establishes superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font.

Superscript text can be used for footnotes, mathematical exponents, ordinal numbers (like 1^st, 2^nd), and other specialized uses.

Tip: Use the  tag only for semantic purposes, such as mathematical notation or footnotes. For pure styling, use CSS instead.

Note: The  element establishes subscript text, which appears half a character below the normal line.

Browser Support

The  tag is supported in all major browsers:

Chrome

Yes

Firefox

Yes

Safari

Yes

Edge

Yes

Opera

Yes

Attributes

The  tag supports the Global Attributes in HTML.

The  tag also supports the Event Attributes in HTML.

Examples

Mathematical Exponents

Use superscript for mathematical powers and exponents:

Example
<p>The formula for area of a square is: A = side<sup>2</sup></p>
<p>The Pythagorean theorem: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>
<p>10<sup>3</sup> = 1000</p>
<p>E = mc<sup>2</sup></p>

Ordinal Numbers

Display ordinal indicators like 1st, 2nd, 3rd:

Example
<p>We finished in 1<sup>st</sup> place!</p>
<p>Today is the 22<sup>nd</sup> of January.</p>
<p>She came in 3<sup>rd</sup> in the race.</p>
<p>The 4<sup>th</sup> of July is Independence Day.</p>

Footnote References

Create footnote markers in academic or formal text:

Example
<p>
  HTML is the standard markup language for web pages.<sup>1</sup>
  It was first released in 1993.<sup>2</sup>
</p>

<footer>
  <p><sup>1</sup> World Wide Web Consortium (W3C)</p>
  <p><sup>2</sup> Source: Wikipedia</p>
</footer>

Trademark and Copyright Symbols

Display trademark, registered, and copyright symbols:

Example
<p>Brand Name<sup>TM</sup></p>
<p>Company Name<sup>&reg;</sup></p>
<p>Product Name<sup>&copy;</sup></p>
<p>Service<sup>SM</sup></p>

Styled Superscript

Customize the appearance with CSS:

Example
<style>
  .custom-sup {
    color: #745af2;
    font-weight: bold;
    font-size: 0.7em;
  }

  .footnote-ref {
    color: blue;
    cursor: pointer;
  }

  .footnote-ref:hover {
    text-decoration: underline;
  }
</style>

<p>Water formula: H<sub>2</sub>O at temperature 100<sup class="custom-sup">°C</sup></p>
<p>Click for more info<sup class="footnote-ref">*</sup></p>

Chemical Isotopes

Display atomic mass numbers in chemistry:

Example
<p>Carbon-14: <sup>14</sup>C</p>
<p>Uranium-235: <sup>235</sup>U</p>
<p>Oxygen-18: <sup>18</sup>O</p>
<p>Plutonium-239: <sup>239</sup>Pu</p>

Common Use Cases

Mathematics: Exponents, powers, and mathematical notation (x², 10ⁿ)
Footnotes: Reference markers in academic and formal writing
Ordinal Numbers: 1^st, 2^nd, 3^rd, 4^th, etc.
Trademarks: Brand^TM, Company^®
Chemistry: Atomic mass numbers and isotopes
Units: Temperature degrees, squared units (m²)

Accessibility Considerations

Screen readers generally announce superscript text normally
For footnotes, consider using aria-describedby to link references
Ensure sufficient contrast between superscript and surrounding text
Don't rely solely on visual positioning to convey meaning
For complex mathematical notation, consider using MathML or images with alt text

Accessibility Tip: For footnote links, use anchor tags inside  with proper aria-labels for better screen reader support.

Superscript vs Subscript

Feature	<sup> (Superscript)	<sub> (Subscript)
Position	Above the baseline	Below the baseline
Common Uses	Exponents, footnotes, ordinals, trademarks	Chemical formulas, mathematical subscripts
Example	x², 1^st, Brand^TM	H₂O, x_i
Visual Effect	Raised and smaller	Lowered and smaller

Best Practices

Use  for semantic purposes, not just styling
Don't use superscript for purely decorative text positioning
For mathematical notation, consider MathML for complex formulas
Combine with <a> tags for clickable footnote references
Test readability - superscript text is smaller and may be hard to read
Ensure proper spacing around superscript elements
Use CSS vertical-align only for styling, not semantic superscript
Keep superscript text concise (1-3 characters typically)

Try it Yourself

Interactive Example

Mathematics: E = mc²
Ordinal: Today is January 1^st
Footnote: HTML is awesome¹
Trademark: Brand Name^TM
Chemistry: ¹⁴C (Carbon-14)

¹ Source: HTML Free Codes

Try in Code Playground

Default CSS Settings

Most browsers will display the  element with the following default values:

Default CSS
sup {
  vertical-align: super;
  font-size: smaller;
}

Related Tags

Defines subscript text
Defines smaller text
<var>
Defines a variable
Defines a section in a document
<abbr>
Defines an abbreviation
Defines marked/highlighted text