- The Subscript Element

The `` Element

Inline HTML 3.2

The subscript element represents inline text displayed as subscript, positioned below the normal line of text and often in a smaller font.

Quick Example

<p>The chemical formula for water is H<sub>2</sub>O.</p>
<p>Carbon dioxide: CO<sub>2</sub></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>The chemical formula for water is H<sub>2</sub>O.</p>
<p>Carbon dioxide: CO<sub>2</sub></p>

Syntax

<sub>subscript text</sub>

The  element displays its content below the baseline.

Common Use Cases

Chemical Formulas

<p>H<sub>2</sub>O - Water</p>
<p>CO<sub>2</sub> - Carbon Dioxide</p>
<p>C<sub>6</sub>H<sub>12</sub>O<sub>6</sub> - Glucose</p>
<p>H<sub>2</sub>SO<sub>4</sub> - Sulfuric Acid</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>H<sub>2</sub>O - Water</p>
<p>CO<sub>2</sub> - Carbon Dioxide</p>
<p>C<sub>6</sub>H<sub>12</sub>O<sub>6</sub> - Glucose</p>
<p>H<sub>2</sub>SO<sub>4</sub> - Sulfuric Acid</p>

Mathematical Notation

<p>Base 10: log<sub>10</sub>(100) = 2</p>
<p>Sequence: a<sub>1</sub>, a<sub>2</sub>, a<sub>3</sub>, ..., a<sub>n</sub></p>
<p>Matrix element: M<sub>i,j</sub></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Base 10: log<sub>10</sub>(100) = 2</p>
<p>Sequence: a<sub>1</sub>, a<sub>2</sub>, a<sub>3</sub>, ..., a<sub>n</sub></p>
<p>Matrix element: M<sub>i,j</sub></p>

Footnote References

<p>
The study was conducted in 2024<sub>1</sub> with
over 1,000 participants<sub>2</sub>.
</p>
<footer>
<p><sub>1</sub> January-March 2024</p>
<p><sub>2</sub> Ages 18-65</p>
</footer>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>
The study was conducted in 2024<sub>1</sub> with
over 1,000 participants<sub>2</sub>.
</p>
<footer>
<p><sub>1</sub> January-March 2024</p>
<p><sub>2</sub> Ages 18-65</p>
</footer>

Scientific Notation

<p>Avogadro's number: 6.022 × 10<sup>23</sup> mol<sup>-1</sup></p>
<p>Atomic mass: U<sub>235</sub></p>
<p>Isotope notation: <sup>14</sup>C<sub>6</sub></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Avogadro's number: 6.022 × 10<sup>23</sup> mol<sup>-1</sup></p>
<p>Atomic mass: U<sub>235</sub></p>
<p>Isotope notation: <sup>14</sup>C<sub>6</sub></p>

Index Notation

<p>Array elements: x<sub>0</sub>, x<sub>1</sub>, x<sub>2</sub></p>
<p>Vector components: v<sub>x</sub>, v<sub>y</sub>, v<sub>z</sub></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Array elements: x<sub>0</sub>, x<sub>1</sub>, x<sub>2</sub></p>
<p>Vector components: v<sub>x</sub>, v<sub>y</sub>, v<sub>z</sub></p>

Real-World Examples

Chemistry Education

<article>
<h3>Common Chemical Compounds</h3>
<ul>
  <li>Water: H<sub>2</sub>O</li>
  <li>Table Salt: NaCl</li>
  <li>Ammonia: NH<sub>3</sub></li>
  <li>Methane: CH<sub>4</sub></li>
  <li>Glucose: C<sub>6</sub>H<sub>12</sub>O<sub>6</sub></li>
</ul>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<h3>Common Chemical Compounds</h3>
<ul>
  <li>Water: H<sub>2</sub>O</li>
  <li>Table Salt: NaCl</li>
  <li>Ammonia: NH<sub>3</sub></li>
  <li>Methane: CH<sub>4</sub></li>
  <li>Glucose: C<sub>6</sub>H<sub>12</sub>O<sub>6</sub></li>
</ul>
</article>

Mathematical Documentation

<div class="formula">
<h4>Geometric Series</h4>
<p>
  S<sub>n</sub> = a<sub>1</sub> + a<sub>2</sub> + a<sub>3</sub> + ... + a<sub>n</sub>
</p>
<p>
  Where a<sub>n</sub> = a<sub>1</sub> × r<sup>n-1</sup>
</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="formula">
<h4>Geometric Series</h4>
<p>
  S<sub>n</sub> = a<sub>1</sub> + a<sub>2</sub> + a<sub>3</sub> + ... + a<sub>n</sub>
</p>
<p>
  Where a<sub>n</sub> = a<sub>1</sub> × r<sup>n-1</sup>
</p>
</div>

Research Paper

<article>
<p>
  The concentration of CO<sub>2</sub> in the atmosphere
  has increased significantly<sup>1</sup>.
</p>
<p>
  Ocean acidification affects CaCO<sub>3</sub>
  formation<sup>2</sup>.
</p>
<footer>
  <p><sup>1</sup> Smith et al., 2024</p>
  <p><sup>2</sup> Jones et al., 2023</p>
</footer>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<p>
  The concentration of CO<sub>2</sub> in the atmosphere
  has increased significantly<sup>1</sup>.
</p>
<p>
  Ocean acidification affects CaCO<sub>3</sub>
  formation<sup>2</sup>.
</p>
<footer>
  <p><sup>1</sup> Smith et al., 2024</p>
  <p><sup>2</sup> Jones et al., 2023</p>
</footer>
</article>

Product Specifications

<div class="specs">
<h4>Battery Specifications</h4>
<p>Type: Li-ion</p>
<p>Capacity: 3000 mAh</p>
<p>Voltage: 3.7 V</p>
<p>Chemistry: LiCoO<sub>2</sub></p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="specs">
<h4>Battery Specifications</h4>
<p>Type: Li-ion</p>
<p>Capacity: 3000 mAh</p>
<p>Voltage: 3.7 V</p>
<p>Chemistry: LiCoO<sub>2</sub></p>
</div>

Styling

Customize subscript appearance:

<style>
sub {
  font-size: 0.75em;
  vertical-align: sub;
  color: #0066cc;
}
</style>

<p>Chemical formula: H<sub>2</sub>SO<sub>4</sub></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
sub {
  font-size: 0.75em;
  vertical-align: sub;
  color: #0066cc;
}
</style>

<p>Chemical formula: H<sub>2</sub>SO<sub>4</sub></p>

Custom Positioning

<style>
.custom-sub sub {
  font-size: 0.7em;
  vertical-align: -0.3em;
  font-weight: 600;
}
</style>

<p class="custom-sub">
Base 2: log<sub>2</sub>(8) = 3
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.custom-sub sub {
  font-size: 0.7em;
  vertical-align: -0.3em;
  font-weight: 600;
}
</style>

<p class="custom-sub">
Base 2: log<sub>2</sub>(8) = 3
</p>

With Superscript

Combining subscript and superscript:

<p>Isotope: <sup>235</sup>U<sub>92</sub></p>
<p>Ion: Fe<sup>2+</sup></p>
<p>Complex: [Cu(NH<sub>3</sub>)<sub>4</sub>]<sup>2+</sup></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Isotope: <sup>235</sup>U<sub>92</sub></p>
<p>Ion: Fe<sup>2+</sup></p>
<p>Complex: [Cu(NH<sub>3</sub>)<sub>4</sub>]<sup>2+</sup></p>

When NOT to Use ``

<!-- Don't use sub just to make text smaller/lower -->
<p>Copyright<sub>©</sub> 2024</p>

<p><small>© 2024</small></p>
<!-- or -->
<p>&copy; 2024</p>

Use Semantic Alternatives

Wrong
Right

<!-- Don't use sub for footnote markers -->
<p>See note below<sub>*</sub></p>

<p>See note below<sup><a href="#note1">1</a></sup></p>

Accessibility

Most screen readers read subscript text without announcing it as subscript. The positioning is primarily visual.

Provide Context

For chemical formulas and complex notation, provide explanatory text:

<p>
  Water (<abbr title="H-two-O">H<sub>2</sub>O</abbr>)
  is essential for life.
</p>

Alternative Text

For critical information, provide text alternatives:

<p>
<span aria-label="Carbon dioxide">CO<sub>2</sub></span>
emissions must be reduced.
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>
<span aria-label="Carbon dioxide">CO<sub>2</sub></span>
emissions must be reduced.
</p>

Mathematical Expressions

<div class="math">
<p>Summation: Σ<sub>i=1</sub><sup>n</sup> x<sub>i</sub></p>
<p>Limit: lim<sub>x→0</sub> f(x)</p>
<p>Derivative: ∂f/∂x<sub>i</sub></p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="math">
<p>Summation: Σ<sub>i=1</sub><sup>n</sup> x<sub>i</sub></p>
<p>Limit: lim<sub>x→0</sub> f(x)</p>
<p>Derivative: ∂f/∂x<sub>i</sub></p>
</div>

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	1+	Full support
Edge	12+	Full support
IE	3+	Full support

The  element has been supported since the earliest browsers.

For superscript text. Learn more →

For mathematical variables. Learn more →

<sub> - The Subscript Element

The `<sub>` Element

Quick Example

Syntax

Common Use Cases

Chemical Formulas

Mathematical Notation

Footnote References

Scientific Notation

Index Notation

Real-World Examples

Chemistry Education

Mathematical Documentation

Research Paper

Product Specifications

Styling

Custom Positioning

With Superscript

When NOT to Use `<sub>`

Don’t Use Just for Styling

Use Semantic Alternatives

Accessibility

Provide Context

Alternative Text

Mathematical Expressions

Browser Support

Specifications

<sub> - The Subscript Element

The <sub> Element

Quick Example

Syntax

Common Use Cases

Chemical Formulas

Mathematical Notation

Footnote References

Scientific Notation

Index Notation

Real-World Examples

Chemistry Education

Mathematical Documentation

Research Paper

Product Specifications

Styling

Custom Positioning

With Superscript

When NOT to Use <sub>

Don’t Use Just for Styling

Use Semantic Alternatives

Accessibility

Screen Reader Behavior

Provide Context

Alternative Text

Mathematical Expressions

Browser Support

Related Elements

Specifications

The `<sub>` Element

When NOT to Use `<sub>`