HTML Subscript Generator

Write chemical formulas and indices with the sub element or a CSS baseline shift.

Subscript HTMLsub element
H<sub>2</sub>O
Runs locally in your browser

About the HTML Subscript Generator

Subscripts are small characters set below the baseline: the 2 in a water molecule, the n in a sequence index, the atom counts running through a chemical formula. The sub element is the correct markup for all of them, and this builder assembles the finished run of text for you from three parts, what comes before, the lowered characters themselves and whatever follows, so you copy one complete line instead of nesting tags by hand.

The CSS option produces a span with vertical-align: sub and a reduced font size, which is worth choosing when the lowered character is purely decorative, a stylised wordmark for instance. Setting line-height: 0 on that span is what stops the shifted character from stretching the line box and leaving uneven gaps between lines of a paragraph, a detail hand written CSS almost always forgets to include.

For heavy scientific notation, MathML or a dedicated equation renderer will serve you better than nested elements, because they carry the structure of the expression rather than only its appearance, which matters for copy and paste and for screen readers. For characters raised above the baseline, use the HTML Superscript Generator, and to check the finished page for nesting mistakes run the HTML Validator.

How to use

  1. Type the text before the subscript, for example a chemical symbol.
  2. Enter the lowered characters and anything that follows them.
  3. Choose the sub element unless the effect is purely decorative.
  4. Copy the line straight into your paragraph.

Common questions

Which tag makes text sit lower?
The sub element. Wrap only the characters that belong below the baseline, not the whole formula.
Why does my line spacing look uneven?
A shifted character can grow the line box. Setting line-height to zero on the shifted span keeps the paragraph even.
Can I nest subscripts inside superscripts?
Browsers allow it, but the result is tiny and hard to read. An equation renderer handles that case far better.
Is sub read out by screen readers?
Support varies. For formulas that must be understood exactly, provide the written form in text as well.