A science page writes out the formula for water, H2O, where the 2 needs to appear slightly lowered and smaller than the letters around it. A little further down, a mathematical formula names a sequence of variables x1, x2, x3, where each index tells one term apart from the next.
In both cases, the lowered digit is not decoration: it is part of the meaning of the notation. That is exactly what <sub> is meant to carry, provided it is not used purely for the pleasure of shifting text down visually.
Definition
<sub> wraps text that needs to display as a subscript, slightly below the baseline and usually at a reduced size, because that position is part of the notation itself: a subscript in a chemical formula, a numbered variable in mathematics, a mark in some older typographical conventions.
What <sub> never stands for is text simply shifted downward for aesthetic reasons. If the shift changes nothing about the meaning of the sentence, the tag is not the right answer, a distinction covered in more detail below.
Syntax and minimal markup
It is an inline element with no attribute of its own beyond the global ones. It usually wraps a single character or a very short fragment of text, never a whole sentence.
<p>The formula for water is written H<sub>2</sub>O.</p>Concrete example
Here is a chemical formula and a mathematical notation, two classic uses where the subscript carries information rather than a simple effect.
<p>Carbon dioxide is written CO<sub>2</sub>.</p>
<p>The sequence is defined by u<sub>n+1</sub> = 2 × u<sub>n</sub>.</p>In the second line, un and un+1 do not name the same value: the subscript tells apart two different terms of the sequence, a role that appearance alone could not carry unless it was understood as a subscript.
Difference with CSS vertical-align
The CSS property vertical-align: sub produces the same visual shift as the tag, which keeps the confusion alive even though the two answer different needs.
<sub> | CSS vertical-align: sub | |
|---|---|---|
| What it expresses | A subscript that is part of the notation's meaning | Nothing, a plain visual shift applied to any text |
| To a screen reader | May be conveyed as a subscript depending on the software | No difference from the surrounding text |
| Good use | Chemical formula, indexed variable | Aligning a decorative element unrelated to a notation |
Using vertical-align: sub to write H2O produces the right-looking formula without carrying its meaning: a search engine indexing the text, a tool extracting a chemical formula automatically, or a person copying and pasting the text all lose the information that this 2 is a subscript. Conversely, applying <sub> to a logo or a decorative bullet to nudge it downward misuses the tag and adds nothing a CSS property would not already do.
<sub> is not a layout tool for aligning any element slightly lower. If the content loses no meaning by becoming plain text back on the baseline, the tag does not fit and the shift belongs in CSS instead.
Best practices and a common trap
Reserve <sub> for cases where the subscript carries real information: chemical formulas, mathematical notation, a handful of inherited typographical uses such as certain abbreviations. The most common trap is reaching for it purely for visual effect, for instance to nudge text down slightly inside a logo or a bullet with no connection to a notation, a use that misleads assistive technology without any benefit in meaning.
For long and complex chemical or mathematical formulas, always compare with <math>, a markup language dedicated to elaborate mathematical notation: <sub> and <sup> are enough for a single subscript or superscript, but quickly fall short in front of a multi-level equation.
Frequently asked questions
Can <sub> be used to nudge an icon or a logo down slightly?
No, that is not this tag's role. Such a purely visual adjustment belongs to the CSS property vertical-align or a transform, applied to the element in question rather than to a tag meant to carry a precise meaning.
Should <sub> be used for a footnote reference called out in the text?
No, that reference is marked with <sup> instead, the superscript, since footnote call-outs are traditionally displayed as a raised number rather than a lowered one. <sub> stays reserved for subscripts, in chemical formulas and mathematical notation.
Does the content of a <sub> stay readable if the page's CSS is disabled?
Yes, and that is exactly the point of the tag. Even with no stylesheet at all, the browser applies its own default rendering for the subscript, which guarantees that the formula or notation stays understandable in any context, unlike a plain shift handled only by the site's CSS.