Subscript, Superscript in HTML

You’ve probably written H₂O or E=mc² by hand on paper. But when you need to put these in a webpage, what do you actually type in the HTML?

A lot of beginners either copy-paste the Unicode characters (₂, ²) or just skip the formatting altogether. Both of those approaches have problems. Unicode characters aren’t always supported consistently, and skipping the formatting just looks wrong.

The correct answer is simpler than you’d expect. HTML has two dedicated elements built specifically for this: <sub> for subscript text and <sup> for superscript text. They’re small tags with a huge range of real-world uses.

In this tutorial, you’ll learn how both tags work, when to use them, and how to apply them for chemical formulas, math notation, dates, ordinal numbers, and footnotes. You’ll also see how to style them with CSS and avoid the mistakes beginners usually run into.

---

01What Are Subscript and Superscript in HTML?

Before touching the tags, let’s be clear on what subscript and superscript actually mean.

Subscript is text that sits below the normal text baseline. It’s usually smaller than the surrounding characters. The most familiar example is the numbers in a chemical formula: the “2” in H₂O is subscript because it describes how many hydrogen atoms are in the molecule.

Superscript is text that sits above the normal text baseline. Again, smaller than the surrounding text. The exponent in x² is superscript, as are the ordinal suffixes in 1st, 2nd, 3rd.

Now, you could fake both of these visually using CSS on a plain <span>. It would look identical in the browser. But that approach is purely decorative. HTML’s <sub> and <sup> elements carry semantic meaning, which matters for screen readers, search engines, and any tool that reads your HTML for its meaning rather than just its appearance.

If you’re not sure why that matters, our guide on semantic HTML covers this well. The short version: the right tag for the right content always wins over a visual trick.

---

02The sub Tag in HTML

The <sub> element marks text as subscript. It is an inline element, meaning it flows directly within a line of text without creating any line breaks. (If you’re new to the block vs inline distinction, we have a full breakdown in our article on Inline vs Block Elements in HTML.)

Basic Syntax of the sub Tag

The syntax is as straightforward as it gets:

<p>The chemical formula for water is H<sub>2</sub>O.</p>
<p>Carbon dioxide is CO<sub>2</sub>.</p>

That’s the whole thing. Open with <sub>, write the subscript content, close with </sub>. The browser automatically renders the text smaller and shifts it below the baseline.

When Should You Use the sub Tag in HTML?

Use <sub> when the lowered position carries actual meaning. That means:

• Chemical formulas (H₂O, CO₂, H₂SO₄, C₆H₁₂O₆)
• Mathematical subscripts in variable notation (xₙ, aᵢⱼ)
• Footnote markers in some citation styles

Do not use it just to make text look smaller or visually shifted downward for style purposes. If the position doesn’t mean anything, use CSS on a <span> instead.

---

03The sup Tag in HTML

The <sup> element marks text as superscript. Like <sub>, it is an inline element. It wraps around only the characters that need to be raised.

Basic Syntax of the sup Tag

<p>Einstein's famous equation: E = mc<sup>2</sup></p>
<p>She placed 1<sup>st</sup> in the competition.</p>

The “2” after mc and the “st” after 1 both render above the baseline, smaller than the surrounding text. No CSS needed. The browser handles the positioning automatically.

When Should You Use the sup Tag in HTML?

Use <sup> when the raised position has meaning:

• Mathematical exponents and powers (x², n³, 2¹⁰)
• Ordinal suffixes (1st, 2nd, 3rd, 4th)
• Footnote reference numbers in the body of text
• Scientific notation (3.0 × 10⁸)
• Trademark-style markers (™, ®) in some typographic styles

Now let’s look at where the two tags actually sit relative to each other:

---

04Writing Chemical Formulas with HTML Subscript

Chemistry is the most frequent real-world use for the <sub> tag in HTML. In every chemical formula, subscript numbers indicate how many atoms of each element appear in the molecule.

Let’s write a few common ones:

<!-- Water -->
<p>Water: H<sub>2</sub>O</p>

<!-- Carbon dioxide -->
<p>Carbon dioxide: CO<sub>2</sub></p>

<!-- Sulfuric acid -->
<p>Sulfuric acid: H<sub>2</sub>SO<sub>4</sub></p>

<!-- Glucose -->
<p>Glucose: C<sub>6</sub>H<sub>12</sub>O<sub>6</sub></p>

You can use as many <sub> tags in a single formula as you need. Each one only wraps the specific characters that should be subscript. The non-subscript letters (C, H, O, S) stay outside the tag entirely.

Here’s a visual reference:

---

05Mathematical Notation with HTML Superscript

HTML superscript is just as important for math as subscript is for chemistry. Exponents, powers, and squared or cubed expressions all rely on <sup>.

Exponents and Powers

<p>x squared: x<sup>2</sup></p>
<p>x cubed: x<sup>3</sup></p>
<p>2 to the power of 10: 2<sup>10</sup> = 1024</p>
<p>Scientific notation: 3.0 &times; 10<sup>8</sup> m/s</p>

The × in that last example is an HTML entity for the × symbol. HTML entities are useful companions when writing math alongside sub and sup tags. We covered some of the common formatting elements in our HTML Text Formatting guide, and you’ll find yourself using them often here.

Famous Mathematical Equations

<!-- Einstein's mass-energy equivalence -->
<p>E = mc<sup>2</sup></p>

<!-- Pythagorean theorem -->
<p>a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>

<!-- Area of a circle -->
<p>A = &pi;r<sup>2</sup></p>

Also worth knowing: if you have a variable like x in a math expression, the <var> tag is the correct semantic element to wrap it. We covered <var> in our tutorial on Preformatted Text and Code Display in HTML. You can combine <var> with <sup> like this: <var>x</var><sup>2</sup>.

---

06Ordinal Numbers and Dates

Ordinal numbers are 1st, 2nd, 3rd, 4th, and so on. The suffix letters (st, nd, rd, th) are traditionally typeset in superscript. In HTML, the <sup> element does this correctly.

<p>She finished in 1<sup>st</sup> place.</p>
<p>He came 2<sup>nd</sup> in the race.</p>
<p>This is my 3<sup>rd</sup> attempt.</p>
<p>We live on the 4<sup>th</sup> floor.</p>

Ordinals in Dates

<p>The event is on the 21<sup>st</sup> of March.</p>
<p>The company was founded on July 4<sup>th</sup>, 1999.</p>

When marking up actual dates in HTML for machines to read (not just humans), you should also use the <time> element with a datetime attribute. The <sup> handles the visual presentation, and <time> handles the machine-readable meaning. That’s a great example of how semantic HTML elements work together, which we explored in our article on Semantic HTML.

---

07Creating Footnotes with the sup Tag in HTML

Footnotes are a classic use case for HTML superscript. You’ve seen them in academic writing and long-form articles: a small raised number in the body text that corresponds to a reference or note at the bottom of the page.

In HTML, you build this pattern with two parts. A linked superscript number in the body text, and a matching ordered list of references below. Here’s how it looks in code:

<p>
  HTML was created by Tim Berners-Lee<sup><a href="#fn1">1</a></sup> in 1991 
  while he was working at CERN<sup><a href="#fn2">2</a></sup> in Switzerland.
</p>

<hr>

<ol>
  <li id="fn1">Tim Berners-Lee, inventor of the World Wide Web and HTML.</li>
  <li id="fn2">CERN, the European Organization for Nuclear Research, Geneva, Switzerland.</li>
</ol>

Look at what’s happening here. The <sup> wraps an <a> anchor link that points to #fn1. The footnote item at the bottom has an id="fn1" that matches. When the reader clicks the number, the page scrolls directly to the footnote.

This approach is fully accessible. Keyboard users and screen reader users can navigate directly between the reference and its note. A plain visual number with no link can’t do that.

Here’s a live demo of what this looks like in practice:

Click the bracketed numbers in the demo above. They link directly to the corresponding footnote. That’s the power of combining <sup> with anchor links.

---

08When You Need Both sub and sup Together

Some scientific notation uses subscript and superscript at the same time, on the same element. The most common case is isotope notation in chemistry and physics.

Carbon-14, the isotope used in radiocarbon dating, is written with the mass number (14) as superscript and the atomic number (6) as subscript, both before the element symbol:

<!-- Isotope notation -->
<p><sup>14</sup><sub>6</sub>C — Carbon-14</p>
<p><sup>235</sup><sub>92</sub>U — Uranium-235</p>

You can also use them together in logarithm notation:

<p>log<sub>2</sub>(n) grows slower than n<sup>2</sup></p>

The browser renders both at the same time. One important note: HTML alone won’t perfectly stack the superscript and subscript directly above and below each other the way professional typeset documents do. For that level of precision, math rendering libraries like MathJax or KaTeX are the right tool. But for general web content, the HTML approach is accurate enough and widely understood.

---

09Styling HTML Subscript and Superscript with CSS

Browsers already know how to render <sub> and <sup>. You don’t need to add any CSS for them to work. But sometimes the default rendering creates a problem: the raised or lowered text increases the line height of the surrounding text, which makes your paragraph spacing look uneven.

The Default Browser CSS

Most browsers apply something close to this by default:

sub {
  vertical-align: sub;
  font-size: smaller;
}

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

The Professional CSS Technique

Here’s a CSS pattern used in many well-built stylesheets and CSS resets. It fixes the line-height problem while keeping the visual effect clean:

sub,
sup {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

The key is line-height: 0. This removes the element from the line’s height calculation so it doesn’t push lines apart. Then position: relative with top or bottom handles the vertical offset manually. The result is visually identical to the browser default, but the paragraph spacing stays consistent regardless of how many sub or sup elements you use.

Styling Footnote Links

If you’re using <sup> for clickable footnote numbers, give them some clear visual treatment:

sup a {
  color: #6366f1;
  text-decoration: none;
  font-weight: 600;
}

sup a:hover {
  color: #ec4899;
  text-decoration: underline;
}

This makes footnote references visually distinct from the body text and lets readers know they’re interactive.

---

10Common Mistakes Beginners Make

Using sub or sup for Visual Effect Only

Don’t use <sub> or <sup> just because you want something to look smaller or slightly shifted. These are semantic elements. They tell the browser and assistive technology that the content is genuinely subscript or superscript in meaning.

If you want text to look visually raised or lowered with no semantic reason, use a <span> with vertical-align in CSS. Save <sub> and <sup> for when they’re actually appropriate.

Missing the Closing Tag

Both elements need a closing tag. If you forget to close <sub>, the rest of your paragraph can render as subscript. This is one of the most common beginner errors with these tags.

<!-- Wrong: missing closing tag -->
<p>H<sub>2O is water.</p>

<!-- Correct -->
<p>H<sub>2</sub>O is water.</p>

Wrapping More Than You Should

Only wrap the exact characters that need to be subscript or superscript. Nothing more.

<!-- Wrong: wrapping too much -->
<p>H<sub>2O</sub></p>

<!-- Correct: only the number is subscript -->
<p>H<sub>2</sub>O</p>

Relying on Unicode Characters Instead of Tags

You might be tempted to paste ² or ₂ directly into your HTML text. While this can work in some cases, it has real drawbacks: not all characters have Unicode equivalents, the characters may not render consistently across fonts, and they carry no semantic meaning. The <sub> and <sup> tags are always the better choice for content that has actual meaning.

Using span and CSS Instead of Semantic Tags

Doing <span style="vertical-align:super; font-size:0.75em">2</span> looks the same as <sup>2</sup> in the browser. But a screen reader will read one of those as a superscript and the other as just a smaller, floating span. If you’re writing a chemical formula or a math expression, the semantics matter. Use the right tag.

---

11What You Learned Today

Two small tags. A huge range of applications.

The <sub> tag in HTML gives you subscript text for chemical formulas, variable notation, and more. The <sup> tag gives you HTML superscript for math exponents, ordinal numbers, footnotes, and scientific notation. Both are semantic elements that communicate meaning beyond just appearance.

The rule is simple: use them when position carries meaning. Use CSS when it’s just visual. That distinction is what separates clean, meaningful HTML from code that happens to look right.

These two tags are small, but they show up constantly across scientific writing, educational content, math notation, and long-form articles. Now that you know them well, you’ll recognize every use case the moment it appears.

Keep going. Each new tag or concept you learn connects to what you already know.