#30DaysofHTML Day 10: and

Up and down we go

and

Apr 10, 2021

If you're a fan of footnotes, certain abbreviations, exponents, or chemical formulas, you're familiar with superscripts and subscripts. Superscripts are the ones that go up, and subscripts go down. Shockingly, these characters may be marked up in HTML using the and elements.

⚠️ 👀As always, these HTML elements should not be used for CSS styling purposes. They are intended to communicate meaning. E=mc2 means that we’re multiplying mass x the speed of light x 2, while E=mc2 means the speed of light is squared (and then multiplied by mass). Important difference.

Superscripts with

Superscripts are the ones that go up. You'll find them used as exponents and some kinds of lettering, among other cases.

<p>Which way to 4<sup>th</sup> Street?</p>  

<p>The Pythagorean Theorem says that a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>.</p>

Subscripts with

Let's say we want to write some markup for Jen's favorite Valentine poem ever. (Did you know she was a biology major/chemistry minor in college? Science is her love language.)

Roses are angiosperms, violets are too. Sugar is C12H22O11, we know this from peer review.

The markup for this poem would look like this:

<p>Roses are angiosperms<br>
 Violets are too<br>
 Sugar is C<sub>12</sub>H<sub>22</sub>O<sub>11</sub><br>
 We know this from peer review</p>

Bonus: MathML

✅ You might be wondering about the boundaries between these simple HTML superscripts and subscripts and full-fledged scientific and mathematical formulas. If you're writing complex equations, you might want to look into MathML, the math markup language. It's made for long division, fractions, and of course, superscripts and subscripts, among many other elements.

Did anyone solve it?… it’s MIT, Massachusetts Institute of Technology!

Some things are best reserved for MathML.

A misconception on MDN

⛔️ MDN combines footnotes with subscripts. We have not seen this formatting often in the wild. Wikipedia likes superscripts for footnotes, as do most manuals of style.