Subscript and Superscript
<sub> and <sup> shift text below or above the normal baseline —
the classic use cases are chemical formulas, mathematical exponents,
footnote markers, and ordinal suffixes. They're small elements, but
picking between semantic markup and pure CSS styling matters for
accessibility.
<sub> — Subscript
<sub> renders its content slightly below the baseline, in a smaller
font size. It's most at home in chemical formulas, where the number
of atoms is written as a subscript.
sub.html
<p>Water is H<sub>2</sub>O.</p> <p>Carbon dioxide is CO<sub>2</sub>, and glucose is C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>.</p>
<sup> — Superscript
<sup> renders its content slightly above the baseline. Common uses include exponents, footnote references, and ordinal indicators like "1st" or "2nd".
sup.html
<p>Einstein's famous equation is E = mc<sup>2</sup>.</p> <p>The area of a square with side <var>s</var> is <var>s</var><sup>2</sup>.</p> <p>This is the 21<sup>st</sup> century.</p> <p>Water boils at 100°C at sea level<sup>[1]</sup>.</p>
Footnote References
A very common pattern is using <sup> to link a footnote marker to
its definition further down the page, combined with a fragment link
(see the anchor fragments tutorial for more on linking within a
page).
footnote.html
<p> The HTML spec defines dozens of elements<sup><a href="#fn1" id="ref1">[1]</a></sup>, but only a handful are used daily. </p> <hr> <p id="fn1"> [1] See the <a href="https://html.spec.whatwg.org/multipage/">WHATWG HTML Living Standard</a>. <a href="#ref1">↩</a> </p>
Accessibility Considerations
Most screen readers announce <sub>/<sup> content without indicating it is raised or lowered — the semantic meaning (footnote, exponent, formula index) has to come from context or surrounding text.
Overusing subscript/superscript for pure decoration can make text harder to read for users with low vision, since the font size shrinks.
For footnote markers, always pair the <sup> with a real link (<a href="#fn1">) so keyboard and screen-reader users can actually jump to the note — the visual "raised number" alone conveys nothing to them.
<sub>/<sup> just to make text smaller — that's a job for CSS font-size. Reserve these tags for cases where the position (above/below baseline) is part of the meaning, like math and chemistry notation.CSS vertical-align Alternative
You can visually mimic subscript/superscript using vertical-align: sub or vertical-align: super on a <span> without using the semantic tags at all.
css-alternative.html
<style>
.fake-sup { vertical-align: super; font-size: 0.75em; }
</style>
<p>This looks like a superscript<span class="fake-sup">*</span> but isn't marked up as one.</p><sub>/<sup> elements — they carry meaning that some tools (search engines, translation services, some assistive tech) can key off of. Reserve the CSS-only approach for purely decorative superscript/subscript effects, such as a stylized logo mark, where no semantic meaning is intended.Quick Reference
Element | Position | Typical use case |
|---|---|---|
<sub> | Below baseline | Chemical formula subscripts |
<sup> | Above baseline | Exponents, footnotes, ordinal suffixes |