W3docs
en
Log in

HTML <sup> tag

Use the <sup> tag to define the superscript text, which appears half a character above the regular line and is rendered smaller than the rest of the text.

The HTML <sup> tag defines superscript text — content that renders raised half a character above the normal baseline and in a smaller font. It is an inline, semantic element: it tells the browser and assistive technologies that the raised text has a real typographic meaning, not just a styling tweak.

Use <sup> only when superscript is typographically or semantically required, such as for exponents, ordinal suffixes, footnote markers, and superior lettering in abbreviations. It is not meant for arbitrary "raised text" styling. If you only want to lift text visually for presentation, reach for the CSS vertical-align property with the super value instead of <sup>.

Tip

The <sub> tag is the counterpart of <sup>: it defines subscript text, rendered below the baseline (used for chemical formulas, indices, and the like).

When to use <sup>

Reach for the <sup> element when the superscript carries meaning:

  • Exponents and mathematical powers — E = mc<sup>2</sup>.
  • Ordinal numbers — the st, nd, rd, th in 1<sup>st</sup>, 2<sup>nd</sup>, 5<sup>th</sup>.
  • Footnote and reference markers — a small [1] that links to a note.
  • Superior lettering in abbreviations — common in French, e.g. M<sup>lle</sup> (Mademoiselle) or 1<sup>er</sup>.

Because the meaning lives in the markup, screen readers and search engines can interpret the raised text correctly — something a purely CSS-styled <span> cannot convey.

Syntax

The <sup> tag comes in pairs. The content is written between the opening (<sup>) and closing (</sup>) tags.

Example: exponent in a formula

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>
      E = mc<sup>2</sup>, where E is the energy of the object, m is the weight, c is the light speed in vacuum.
    </p>
  </body>
</html>
Try it Yourself »

In the output above, the 2 is rendered smaller and raised, so the expression reads as "m c squared".

Example: ordinal numbers

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>She finished 1<sup>st</sup>, ahead of the 2<sup>nd</sup> and 3<sup>rd</sup> place runners.</p>
  </body>
</html>

Example: footnote / reference marker

A common pattern is to wrap a small linked marker in <sup> so readers can jump to a note at the bottom of the page:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>
      The first web browser was created in 1990<sup><a href="#fn1">[1]</a></sup>.
    </p>

    <hr />
    <p id="fn1">[1] Tim Berners-Lee, WorldWideWeb, CERN.</p>
  </body>
</html>

Example: superior lettering in abbreviations

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>M<sup>lle</sup> Dupont est arrivée 1<sup>re</sup>.</p>
  </body>
</html>

Styling the presentational alternative with CSS

The examples below are the presentational approach. If your raised text is purely decorative and carries no semantic meaning, prefer CSS over the <sup> element so you don't mislead assistive technologies. The CSS below also shows how to fine-tune the size of genuine <sup> content (by default browsers shrink it; you can override that).

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .raised {
        vertical-align: super;
        font-size: medium;
      }
    </style>
  </head>
  <body>
    <h1>Decorative raised text via CSS</h1>
    <p>
      Here is some text <span class="raised">lifted with CSS</span>.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </body>
</html>
Result

Example: <sup> together with <sub>

<sup> and <sub> are often used side by side — for instance in math, where you may need both a power and an index:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>The term a<sub>n</sub> can be written as a<sub>1</sub><sup>2</sup>.</p>
    <p>Water is H<sub>2</sub>O, and the area of a square is s<sup>2</sup>.</p>
  </body>
</html>
Result
Warning

Use superscript only for genuine typographic meaning. Do not abuse <sup> to hide or shrink important content — some assistive technologies skip, mispronounce, or read superscript out of context, which can make the text harder to understand for screen-reader users.

Attributes

The <sup> tag supports Global attributes and the Event Attributes.

See also

  • <sub> — the subscript counterpart of <sup>.
  • CSS vertical-align — the presentational way to raise or lower inline text.

Practice

Practice
When should you use the HTML sup element?
When should you use the HTML sup element?
Was this page helpful?