<sub>

Definition and Usage

The <sub> element establishes subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font.

Subscript text can be used for chemical formulas, mathematical notations, and footnotes.

Attributes

The <sub> tag supports the Global Attributes in HTML.

The <sub> tag also supports the Event Attributes in HTML.

Examples

Chemical Formulas

The most common use of <sub> is for chemical formulas:

<p>Water has the chemical formula H<sub>2</sub>O.</p>

<p>Carbon dioxide is represented as CO<sub>2</sub>.</p>

<p>Sulfuric acid is H<sub>2</sub>SO<sub>4</sub>.</p>

<p>Glucose has the formula C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>.</p>

Mathematical Notation

Use subscripts in mathematical expressions and variables:

<p>The sequence is defined as a<sub>1</sub>, a<sub>2</sub>, a<sub>3</sub>, ..., a<sub>n</sub>.</p>

<p>In the equation, x<sub>0</sub> represents the initial value.</p>

<p>The base-10 logarithm is written as log<sub>10</sub>.</p>

<p>Matrix element: A<sub>i,j</sub> where i is the row and j is the column.</p>

Footnote References

Use subscripts for footnote markers:

<p>This statement requires citation<sub>1</sub>.</p>

<p>According to recent research<sub>2</sub>, the results are significant.</p>

<hr>

<p><sub>1</sub> Smith, J. (2025). Research Methods. Academic Press.</p>
<p><sub>2</sub> Johnson, M. (2024). Statistical Analysis. Science Journal.</p>

Styled Subscripts

Customize the appearance of subscripts with CSS:

<style>
  sub {
    font-size: 0.75em;
    color: #745af2;
    font-weight: 600;
  }

  .formula sub {
    color: #d32f2f;
  }

  .math-notation sub {
    font-style: italic;
  }
</style>

<p class="formula">The formula for water is H<sub>2</sub>O.</p>

<p class="math-notation">The value x<sub>n</sub> approaches infinity.</p>

Multiple Subscripts

Complex formulas with multiple subscript levels:

<p>A complex chemical: Ca<sub>10</sub>(PO<sub>4</sub>)<sub>6</sub>(OH)<sub>2</sub></p>

<p>Matrix notation: A<sub>m×n</sub> represents an m by n matrix.</p>

<p>Summation: Σx<sub>i</sub> where i ranges from 1 to n.</p>

Combining Sub and Sup

Use both subscript and superscript in scientific notation:

<p>Isotope notation: <sup>238</sup>U<sub>92</sub> (Uranium-238)</p>

<p>Ion: SO<sub>4</sub><sup>2-</sup> (sulfate ion)</p>

<p>Mass number: <sup>14</sup>C<sub>6</sub> (Carbon-14)</p>

Common Use Cases

Sub vs Sup Comparison

Accessibility Considerations

• Screen readers will typically announce subscript text, though they may not always indicate it's subscripted
• For critical scientific content, consider adding ARIA labels or text descriptions
• Ensure sufficient color contrast if you style subscript text with CSS
• Don't use subscript for purely decorative purposes - preserve semantic meaning
• Complex formulas may need additional explanation for accessibility

<p>
  <span aria-label="Water, H 2 O">
    H<sub>2</sub>O
  </span>
</p>

<p>
  <abbr title="Carbon Dioxide, Chemical Formula C O 2">
    CO<sub>2</sub>
  </abbr>
</p>

Best Practices

• Use <sub> for semantic subscript purposes only (chemical formulas, math notation)
• Don't use <sub> just for styling - use CSS vertical-align instead
• Ensure subscript text is readable at the reduced size
• Combine with <sup> for complete scientific notation (isotopes, ions)
• Use appropriate context around subscripted content for clarity
• Consider accessibility when using subscripts in critical content
• Test readability across different devices and screen sizes
• For complex mathematical expressions, consider using MathML or LaTeX libraries

Try it Yourself

Default CSS Settings

Most browsers will display the <sub> element with the following default values:

sub {
  vertical-align: sub;
  font-size: smaller;
}

Related Tags

• <sup>

  Defines superscript text

• <small>

  Defines smaller text

• <var>

  Defines a variable

• <span>

  Defines a section in a document

• <code>

  Defines computer code text

• <abbr>

  Defines an abbreviation