<sub> Subscript
Subscript text, set below the line, as in H2O.
<sub> renders text as subscript, lower and smaller than the text around it. Use it when typography calls for it: chemical formulas like H2O, or variable indexes like x1.
Shrinking or lowering text for decoration is a CSS job. Complex math needs MathML (<math>).
The sub and sup section of the HTML Living Standard (opens in a new tab) restricts both elements to typographical conventions, never presentation. For exponents, its partner is the sup element.
Syntax
H<sub>2</sub>OWhen to use it
Some writing conventions put characters below the line, and <sub> marks them: chemical formulas in a science article, the base of a number in a computing lesson (10102), or an index on a variable in a simple math note (x1, x2). In each case the lowered position carries meaning.
Its partner sup raises text instead. For real equations with fractions, roots or matrices, use MathML, where subscripts are built with <msub> and keep their structure for assistive technology. For a lowered piece of a logo or a decorative layout, use CSS vertical-align.
You may be tempted to type Unicode subscript digits instead of using sub. They exist only for a small set of characters, not every font draws them, and many search tools treat them as different characters from normal digits. The sub element works with any text and keeps the plain characters underneath, so search and copy behave normally.
Live example
Edit the code and watch the preview.
<p>Water is H<sub>2</sub>O and carbon dioxide is CO<sub>2</sub>.</p>More examples
Chemical equation
A balanced equation uses sub for the number of atoms in each molecule. The arrow is written as an HTML entity, and normal-sized numbers in front of a formula show how many molecules there are.
<p>Burning hydrogen:</p>
<p>2H<sub>2</sub> + O<sub>2</sub> → 2H<sub>2</sub>O</p>Number bases
In a computing lesson, a subscript shows which number system a value is written in. The same quantity looks very different in base 2, base 10 and base 16. Without the subscripts, 10 could mean ten or two.
<p>1010<sub>2</sub> = 10<sub>10</sub> = A<sub>16</sub></p>
<p>11111111<sub>2</sub> = 255<sub>10</sub> = FF<sub>16</sub></p>Tip: Real typographic subscripts only.
Browser support
sub has been in HTML since HTML 3.2 and works in every browser. The default style is vertical-align:sub with a smaller font size, which can slightly increase the line height; many stylesheets adjust this with line-height or relative positioning.
Accessibility
Screen readers usually read subscripts as plain digits, so H2O can come out as H 2 O. For formulas that count, add a short explanation in text. MathML Core (opens in a new tab) gives screen readers real math structure for anything complex.
Common mistakes
Wrong
<sub>Terms apply</sub>Right
<small>Terms apply</small>sub is for typographic subscripts like formulas. Shrink text with CSS.
Frequently asked questions
How do I write H2O in HTML?
Put the number in <sub>: H<sub>2</sub>O. The element is for typographical conventions that need subscript, such as chemical formulas and variable indexes like x<sub>1</sub>. It is not a text shrinker. Complex mathematics with fractions or roots belongs in <math> (MathML), which screen readers can interpret. More typical uses are listed in Wikipedia's article on subscripts and superscripts (opens in a new tab).
Why does sub change my line height?
Browsers lower <sub> with vertical-align:sub, and that can push the line box taller and leave uneven gaps between lines. One common fix is sub{line-height:0}. Another is vertical-align:baseline;position:relative;top:.25em, which positions the subscript without touching the line spacing. Check the result on a few lines of wrapped text.