The <sub> & <sup> elements
The <sub> tag shows text as subscript, set lower and smaller than the line, as in chemical formulas like H2O. The <sup> tag shows superscript, set higher, as in exponents like x2, ordinal numbers and footnote markers. Use them only where the raised or lowered position is part of the meaning.
Last updated: October 3, 2026
Quick facts
| Category | Flow content, phrasing content, palpable content |
| Content model | Phrasing content |
| Tag omission | Neither the start nor the end tag can be omitted |
| Permitted parents | Any element that accepts phrasing content |
| DOM interface | HTMLElement (both) |
Syntax
Live example
Edit the code below and watch the preview update instantly.
Attributes
| Attribute | Description |
|---|---|
| — | Both accept only the global attributes. |
Common examples
Chemical formulas
Subscript numbers are part of the formula’s meaning.
Exponents and units
Superscript for powers and square or cubic units.
Footnote references
A superscript number that links to the note at the bottom of the page.
Ordinal numbers in French or English
Some languages require superscript in abbreviations, such as French “1er“.
<sup> vs CSS vertical-align
<sup> and <sub> are for cases where the raised or lowered position is part of the meaning — “m2” isn’t the same as “m2”. CSS vertical-align: super only changes how text looks.
Use the elements for formulas, exponents, footnotes and language rules. Use CSS when the position is purely a design choice, such as a small raised “NEW” label on a menu item.
| <sup> / <sub> | vertical-align | |
|---|---|---|
| Meaning | Yes | No (visual only) |
| Copy & paste keeps it | Usually | No |
| Best for | Math, chemistry, footnotes | Decorative labels |
Common mistakes to avoid
- Using them just to make text small. Use <small> or CSS
font-size. - Footnote numbers that aren’t links. Link the number to the note and back, so readers can jump between them.
- Building complex math with nested sup and sub. It quickly becomes unreadable; use MathML.
- Ignoring line-height. Raised text can push lines apart; fix it with CSS (see the FAQ below).
Accessibility & SEO tips
- Screen readers usually don’t announce superscript or subscript, so “m2” may be read for “m²” — for important units, consider the ² character or add the words “square metres”.
- Unicode characters such as ², ³ and ™ are handy for common cases and keep the meaning when copied.
- Footnote links should have enough space around them to tap on a phone.
- For scientific or mathematical content, check the page with a screen reader once — if formulas don’t read sensibly, add a short text explanation beside them.
Browser support
Supported in every browser, including Chrome, Edge, Firefox, Safari and their mobile versions — it has been part of HTML since the very first versions.