Runnable HTML Docs: Superscript

Q: How do I write superscript in HTML?

Wrap the raised text in : x 2 shows x squared, 1 st an ordinal. The browser draws it smaller and raised above the baseline.

Q: How do I write subscript in HTML?

Use : H 2 O for water, x 1 for an index. It is drawn smaller and lowered below the baseline.

Q: How do I write x squared in HTML?

Either x 2 or the ready-made character x², which you can also type as the entity ². The character is fine for squares and cubes; works for any exponent, like 2 n+1 .

Q: Can I use CSS instead of ?

vertical-align: super with a smaller font-size looks the same, but and carry meaning: "m2" and "m 2 " are different values. Use the tags when the raised or lowered position is part of the content.

How to write superscript in HTML

Wrap the raised text in . The browser shows it smaller and raised above the line. Its partner  shows text smaller and lowered:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sup and sub</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; }
  </style>
</head>
<body>
  <p>Area: 25 m<sup>2</sup></p>
  <p>E = mc<sup>2</sup></p>
  <p>She finished 1<sup>st</sup> in the 3<sup>rd</sup> race.</p>
  <p>Water is H<sub>2</sub>O and carbon dioxide is CO<sub>2</sub>.</p>
</body>
</html>

 and  are inline and can contain other inline elements, so 2n+1 or xi work too.

Common uses

You want	Write	Result
An exponent	`10<sup>3</sup>`	10 to the power of 3
An ordinal	`2<sup>nd</sup>`	2nd with raised letters
A footnote marker	`text<sup><a href="#n1">1</a></sup>`	A raised, clickable 1
A chemical formula	`C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>`	Glucose
An index or base	`x<sub>1</sub>`, `log<sub>2</sub>`	Lowered 1 and 2
A trademark	`Brand<sup>TM</sup>` or `Brand™`	Raised TM

Use the tags when the position is part of the meaning: m2 and m2 are different things. For small text that is only styled small (a label, a badge), use CSS instead.

Footnotes with sup

A footnote marker is a superscript link to a note at the bottom. Give each note an id and point the link at it:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Footnotes</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; line-height: 1.6; }
    .notes { margin-top: 600px; font-size: 14px; border-top: 1px solid #e5e7eb; }
    sup a { text-decoration: none; }
  </style>
</head>
<body>
  <p>The first website went live in 1991.<sup><a href="#n1" id="r1">1</a></sup> It is still online.<sup><a href="#n2" id="r2">2</a></sup></p>
  <ol class="notes">
    <li id="n1">Published by Tim Berners-Lee at CERN. <a href="#r1">Back</a></li>
    <li id="n2">A restored copy is hosted by CERN. <a href="#r2">Back</a></li>
  </ol>
</body>
</html>

Click a number to jump to its note, and "Back" to return. Removing the underline from the small link keeps the paragraph clean, while the link color still marks it as clickable.

Keeping line spacing even

By default, a  or  can make its line taller than the lines around it, so a paragraph with a few exponents looks unevenly spaced. Setting line-height: 0 on them fixes it:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sup line height</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    p { width: 260px; line-height: 1.3; border: 2px solid #e5e7eb; padding: 4px; }
    .fixed { border-color: #16a34a; }
    .fixed sup, .fixed sub { line-height: 0; }
  </style>
</head>
<body>
  <p>Line one of the text.<br>Line two has x<sup>2</sup> in it.<br>Line three is plain.<br>Line four has H<sub>2</sub>O.</p>
  <p class="fixed">Line one of the text.<br>Line two has x<sup>2</sup> in it.<br>Line three is plain.<br>Line four has H<sub>2</sub>O.</p>
</body>
</html>

The gray box is taller because lines two and four were pushed apart. In the green box every line has the same height. Add that rule to your base stylesheet once and forget about it.

Unicode characters and MathML

For a few common cases there are ready-made characters: ² (²), ³ (³), ¹ (¹), ™ (™) and ½ (½). They need no tag and do not affect line height, but they only exist for some digits and letters.

For real formulas (fractions, roots, exponents of exponents), use MathML, which current browsers render natively:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Unicode and MathML</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; }
  </style>
</head>
<body>
  <p>Entities: 5 m&sup2;, 2 m&sup3;, Brand&trade;</p>
  <p>MathML:
    <math>
      <msup><mi>a</mi><mn>2</mn></msup><mo>+</mo>
      <msup><mi>b</mi><mn>2</mn></msup><mo>=</mo>
      <msup><mi>c</mi><mn>2</mn></msup>
    </math>
  </p>
  <p>Nested exponent:
    <math><msup><mi>e</mi><msup><mi>x</mi><mn>2</mn></msup></msup></math>
  </p>
</body>
</html>

<msup> takes a base and an exponent; <msub> does the same for subscripts. For a single exponent in a sentence,  is simpler.

Common mistakes

Using  to make text small. It raises the text as well and tells readers it is a superscript. Use font-size for small text.
Uneven line spacing. Add sup, sub { line-height: 0; }.
Writing x^2 or H2O in finished text. Use x2 and H2O so the content reads correctly.
Footnote markers that are too small to tap. On phones a single raised digit is a tiny target. Add a little padding to sup a, or put the notes near the text.

Frequently Asked Questions

How do I write superscript in HTML?

Wrap the raised text in : x2 shows x squared, 1st an ordinal. The browser draws it smaller and raised above the baseline.

How do I write subscript in HTML?

Use : H2O for water, x1 for an index. It is drawn smaller and lowered below the baseline.

How do I write x squared in HTML?

Either x2 or the ready-made character x², which you can also type as the entity ². The character is fine for squares and cubes;  works for any exponent, like 2n+1.

Why does make the line spacing uneven?

The raised text can make its line taller than the others in the paragraph. Fix it with sup, sub { line-height: 0; }, which stops them from adding height to the line.

Can I use CSS instead of ?

vertical-align: super with a smaller font-size looks the same, but  and  carry meaning: "m2" and "m2" are different values. Use the tags when the raised or lowered position is part of the content.

Related concepts