The <sub> Element
As defined in the HTML Living Standard, the <sub> element represents a subscript, which is typically rendered as a smaller character on a lower line than the rest of the text.
Chemical formula for water: H2O
Mathematical variable: xi
<p>The chemical formula for glucose is C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>.</p>
View HTML Living Standard: The sub element
Usage and Meaning
The <sub> element is intended for typographical conventions where the subscript is a meaningful part of the text, rather than purely decorative.
- Chemical Formulas: Indicating the number of atoms in a molecule.
- Mathematics: Representing indices or variables in a sequence.
- Avoid for Citations: While some style guides use subscripts for citations, the
<cite>element or specialized footnote patterns are often more semantically appropriate.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
The Accessibility Challenge: Most screen readers do not announce "subscript" by default. A blind user may hear "H 2 O" as three separate characters without knowing that the "2" is a subscript.
Solution: If the subscript status is critical for understanding the information (e.g., in a complex scientific paper), you should provide a text alternative using ARIA or hidden text (e.g., <span class="sr-only">subscript 2</span>).
Styling and Legibility
Following SMACSS Module Rules, you should control the appearance of subscripts to ensure they do not disrupt the line-height of your paragraphs.
- Line Height: Standard browser styling for
<sub>can often "push" lines apart, creating uneven vertical spacing. Usevertical-align: baselineand relative positioning to maintain a steady rhythm. - Contrast: Since subscripts are smaller than standard text, they are at higher risk of failing WCAG SC 1.4.3 (Contrast). Ensure they remain legible.
sub {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
bottom: -0.25em;
}
A11y Tip: Screen Reader Fallbacks
For chemistry or math-heavy sites, some developers use CSS to add hidden punctuation for screen readers:
sub::before { content: " subscript "; }
This ensures the relationship is spoken even if the screen reader settings are minimal.