- The Superscript Element

The `` Element

Inline HTML 3.2

The superscript element represents inline text displayed as superscript, positioned above the normal line of text and often in a smaller font.

Quick Example

<p>E = mc<sup>2</sup></p>
<p>Area of a square: A = s<sup>2</sup></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>E = mc<sup>2</sup></p>
<p>Area of a square: A = s<sup>2</sup></p>

Syntax

<sup>superscript text</sup>

The  element displays its content above the baseline.

Common Use Cases

Mathematical Exponents

<p>2<sup>3</sup> = 8</p>
<p>x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup></p>
<p>10<sup>6</sup> = 1,000,000</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>2<sup>3</sup> = 8</p>
<p>x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup></p>
<p>10<sup>6</sup> = 1,000,000</p>

Ordinal Numbers

<p>1<sup>st</sup> place</p>
<p>2<sup>nd</sup> edition</p>
<p>3<sup>rd</sup> quarter</p>
<p>21<sup>st</sup> century</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>1<sup>st</sup> place</p>
<p>2<sup>nd</sup> edition</p>
<p>3<sup>rd</sup> quarter</p>
<p>21<sup>st</sup> century</p>

Footnote and Citation References

<p>
According to recent research<sup>1</sup>, climate change
is accelerating<sup>2</sup>.
</p>
<footer>
<p><sup>1</sup> Smith et al., 2024</p>
<p><sup>2</sup> Jones Research Group, 2024</p>
</footer>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>
According to recent research<sup>1</sup>, climate change
is accelerating<sup>2</sup>.
</p>
<footer>
<p><sup>1</sup> Smith et al., 2024</p>
<p><sup>2</sup> Jones Research Group, 2024</p>
</footer>

Trademark and Copyright Symbols

<p>Brand Name<sup>®</sup></p>
<p>Product Name<sup>™</sup></p>
<p>Copyright<sup>©</sup> 2024</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Brand Name<sup>®</sup></p>
<p>Product Name<sup>™</sup></p>
<p>Copyright<sup>©</sup> 2024</p>

Scientific Notation

<p>Speed of light: 3 × 10<sup>8</sup> m/s</p>
<p>Avogadro's number: 6.022 × 10<sup>23</sup></p>
<p>Planck's constant: 6.626 × 10<sup>-34</sup> J·s</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Speed of light: 3 × 10<sup>8</sup> m/s</p>
<p>Avogadro's number: 6.022 × 10<sup>23</sup></p>
<p>Planck's constant: 6.626 × 10<sup>-34</sup> J·s</p>

Units and Measurements

<p>Area: 100 m<sup>2</sup></p>
<p>Volume: 50 cm<sup>3</sup></p>
<p>Temperature: 25°C (77°F)</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Area: 100 m<sup>2</sup></p>
<p>Volume: 50 cm<sup>3</sup></p>
<p>Temperature: 25°C (77°F)</p>

Real-World Examples

Physics Formula

<article>
<h3>Famous Equations</h3>
<ul>
  <li>Einstein's mass-energy: E = mc<sup>2</sup></li>
  <li>Pythagorean theorem: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></li>
  <li>Kinetic energy: KE = ½mv<sup>2</sup></li>
</ul>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<h3>Famous Equations</h3>
<ul>
  <li>Einstein's mass-energy: E = mc<sup>2</sup></li>
  <li>Pythagorean theorem: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></li>
  <li>Kinetic energy: KE = ½mv<sup>2</sup></li>
</ul>
</article>

Academic Paper

<article>
<p>
  The study<sup>1</sup> examined the effects of temperature
  on reaction rates. Results showed a 10<sup>3</sup> fold
  increase at elevated temperatures<sup>2</sup>.
</p>
<section>
  <h4>References</h4>
  <ol>
    <li><sup>1</sup> Johnson, M. (2024). Temperature Effects...</li>
    <li><sup>2</sup> Data collected at 100°C ± 2°C</li>
  </ol>
</section>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<p>
  The study<sup>1</sup> examined the effects of temperature
  on reaction rates. Results showed a 10<sup>3</sup> fold
  increase at elevated temperatures<sup>2</sup>.
</p>
<section>
  <h4>References</h4>
  <ol>
    <li><sup>1</sup> Johnson, M. (2024). Temperature Effects...</li>
    <li><sup>2</sup> Data collected at 100°C ± 2°C</li>
  </ol>
</section>
</article>

Product Specifications

<div class="specs">
<h4>Apartment Details</h4>
<p>Size: 850 ft<sup>2</sup></p>
<p>Located on the 15<sup>th</sup> floor</p>
<p>Built in the 21<sup>st</sup> century</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="specs">
<h4>Apartment Details</h4>
<p>Size: 850 ft<sup>2</sup></p>
<p>Located on the 15<sup>th</sup> floor</p>
<p>Built in the 21<sup>st</sup> century</p>
</div>

Mathematical Tutorial

<div class="tutorial">
<h4>Exponent Rules</h4>
<ul>
  <li>x<sup>a</sup> × x<sup>b</sup> = x<sup>a+b</sup></li>
  <li>x<sup>a</sup> ÷ x<sup>b</sup> = x<sup>a-b</sup></li>
  <li>(x<sup>a</sup>)<sup>b</sup> = x<sup>ab</sup></li>
  <li>x<sup>0</sup> = 1</li>
</ul>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="tutorial">
<h4>Exponent Rules</h4>
<ul>
  <li>x<sup>a</sup> × x<sup>b</sup> = x<sup>a+b</sup></li>
  <li>x<sup>a</sup> ÷ x<sup>b</sup> = x<sup>a-b</sup></li>
  <li>(x<sup>a</sup>)<sup>b</sup> = x<sup>ab</sup></li>
  <li>x<sup>0</sup> = 1</li>
</ul>
</div>

Styling

Customize superscript appearance:

<style>
sup {
  font-size: 0.75em;
  vertical-align: super;
  color: #0066cc;
}
</style>

<p>Formula: E = mc<sup>2</sup></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
sup {
  font-size: 0.75em;
  vertical-align: super;
  color: #0066cc;
}
</style>

<p>Formula: E = mc<sup>2</sup></p>

Footnote Style

<style>
.footnote sup {
  font-weight: 600;
  color: #d73a49;
}
.footnote sup a {
  text-decoration: none;
  color: inherit;
}
</style>

<p class="footnote">
This statement requires citation<sup><a href="#ref1">1</a></sup>.
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.footnote sup {
  font-weight: 600;
  color: #d73a49;
}
.footnote sup a {
  text-decoration: none;
  color: inherit;
}
</style>

<p class="footnote">
This statement requires citation<sup><a href="#ref1">1</a></sup>.
</p>

With Subscript

Combining superscript and subscript:

<p>Isotope notation: <sup>235</sup>U<sub>92</sub></p>
<p>Ion: SO<sub>4</sub><sup>2-</sup></p>
<p>Element: <sup>14</sup>C<sub>6</sub></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Isotope notation: <sup>235</sup>U<sub>92</sub></p>
<p>Ion: SO<sub>4</sub><sup>2-</sup></p>
<p>Element: <sup>14</sup>C<sub>6</sub></p>

Interactive Footnotes

<article>
<p>
  The discovery<sup><a href="#note1" id="ref1">1</a></sup>
  was made in 2024.
</p>

<footer>
  <p id="note1">
    <sup><a href="#ref1">1</a></sup>
    Published in the Journal of Science, March 2024.
  </p>
</footer>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<p>
  The discovery<sup><a href="#note1" id="ref1">1</a></sup>
  was made in 2024.
</p>

<footer>
  <p id="note1">
    <sup><a href="#ref1">1</a></sup>
    Published in the Journal of Science, March 2024.
  </p>
</footer>
</article>

Mathematical Expressions

<div class="math">
<p>Quadratic: ax<sup>2</sup> + bx + c = 0</p>
<p>Power rule: d/dx(x<sup>n</sup>) = nx<sup>n-1</sup></p>
<p>Exponential: e<sup>x</sup></p>
<p>Sum: Σ<sub>i=1</sub><sup>n</sup> i = n(n+1)/2</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="math">
<p>Quadratic: ax<sup>2</sup> + bx + c = 0</p>
<p>Power rule: d/dx(x<sup>n</sup>) = nx<sup>n-1</sup></p>
<p>Exponential: e<sup>x</sup></p>
<p>Sum: Σ<sub>i=1</sub><sup>n</sup> i = n(n+1)/2</p>
</div>

When NOT to Use ``

<!-- Don't use sup just to raise text -->
<p>Look<sup>up</sup> here</p>

<p>Look up here</p>

Use Proper Characters

Wrong
Right

<!-- Don't use sup for symbols that have Unicode -->
<p>Trademark<sup>TM</sup></p>

<p>Trademark™</p>
<!-- or -->
<p>Trademark&trade;</p>

Accessibility

Most screen readers don’t announce superscript positioning. Consider providing context:

<p>
  <span aria-label="E equals M C squared">
    E = mc<sup>2</sup>
  </span>
</p>

Footnote Links

Make footnote references accessible:

<p>
Research shows<sup><a href="#fn1" aria-label="Footnote 1">1</a></sup>
that exercise improves health.
</p>

<footer>
<p id="fn1">
  <sup>1</sup> Smith, J. (2024). Exercise Benefits Study.
</p>
</footer>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>
Research shows<sup><a href="#fn1" aria-label="Footnote 1">1</a></sup>
that exercise improves health.
</p>

<footer>
<p id="fn1">
  <sup>1</sup> Smith, J. (2024). Exercise Benefits Study.
</p>
</footer>

Mathematical Notation

For complex math, provide alternative descriptions:

<p>
  <span aria-label="X squared plus Y squared equals Z squared">
    x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup>
  </span>
</p>

Temperature and Degrees

<p>Water boils at 100°C (212°F)</p>
<p>Room temperature: 20°C ± 2°C</p>
<p>Angle: 45° (π/4 radians)</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Water boils at 100°C (212°F)</p>
<p>Room temperature: 20°C ± 2°C</p>
<p>Angle: 45° (π/4 radians)</p>

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	1+	Full support
Edge	12+	Full support
IE	3+	Full support

The  element has been supported since the earliest browsers.

For subscript text. Learn more →

For mathematical variables. Learn more →

<sup> - The Superscript Element

The `<sup>` Element

Quick Example

Syntax

Common Use Cases

Mathematical Exponents

Ordinal Numbers

Footnote and Citation References

Trademark and Copyright Symbols

Scientific Notation

Units and Measurements

Real-World Examples

Physics Formula

Academic Paper

Product Specifications

Mathematical Tutorial

Styling

Footnote Style

With Subscript

Interactive Footnotes

Mathematical Expressions

When NOT to Use `<sup>`

Don’t Use Just for Styling

Use Proper Characters

Accessibility

Footnote Links

Mathematical Notation

Temperature and Degrees

Browser Support

Specifications

<sup> - The Superscript Element

The <sup> Element

Quick Example

Syntax

Common Use Cases

Mathematical Exponents

Ordinal Numbers

Footnote and Citation References

Trademark and Copyright Symbols

Scientific Notation

Units and Measurements

Real-World Examples

Physics Formula

Academic Paper

Product Specifications

Mathematical Tutorial

Styling

Footnote Style

With Subscript

Interactive Footnotes

Mathematical Expressions

When NOT to Use <sup>

Don’t Use Just for Styling

Use Proper Characters

Accessibility

Screen Reader Behavior

Footnote Links

Mathematical Notation

Temperature and Degrees

Browser Support

Related Elements

Specifications

The `<sup>` Element

When NOT to Use `<sup>`