How to Use sub Tag for Subscript Text in HTML

The sub tag in HTML shows text in subscript form. It places the text slightly below the normal baseline of a line.

You can use this tag in science or math content where small numbers or letters show under the main text.

Understand the <sub> Tag in HTML

The <sub> tag sets part of the text below the normal phrase line and tells the browser that this text has a smaller font size than the rest.

You must use <sub> with both the open and close tags. The code looks like this:

This is the <sub>subscript</sub>

The word inside the tag drops below the line while other text stays normal.

Writers use subscripts in formulas and math. You can also use it in footnotes or citations to keep text short.

Browsers drop the text lower than the baseline and reduce its size. This style works across most modern browsers without extra setup.

How to Style the Subscript with CSS

The <sub> tag has a default style, but you can use CSS to change it. You can customize styles or even shift the placement lower with vertical-align.

sub {
  font-size: 12px;
  color: red;
  vertical-align: -0.5em;
}

This code sets the subscript text to a small red font and moves it lower.

Examples of <sub> Tag in HTML

Subscript in a Chemical Formula:

H<sub>2</sub>O

This code shows water as H₂O. The number two moves below the main line to show two hydrogen atoms.

Subscript in Mathematical Index:

X<sub>1</sub> + X<sub>2</sub>

This example shows two variables X₁ and X₂. The numbers under the letters tell the order of variables.

Custom CSS Style for Subscript:

<p>Formula: a<sub style="color:blue; font-size:14px;">n</sub></p>

This code shows aₙ with a styled subscript. The letter “n” drops below the line and has custom styles.

Subscript with Nested Content:

<p>Note: CO<sub><em>2</em></sub></p>

This code shows CO₂ with an italic format inside the subscript. The <em> tag works inside <sub>, hence you can style the inner subscript differently.

Wrapping Up

You learned how the <sub> tag works and how CSS can change the styles.

Here is a quick recap:

• The <sub> tag gives you the ability to place text below the line.
• You can use subscripts for formulas in science and math.
• You can use other tags inside <sub>.

FAQs

<p>H<sub>2</sub>O is water</p>

<p>H<sub>2</sub>O vs X<sup>2</sup></p>

<style>
sub {
  color: blue;
  font-size: 14px;
}
</style>
<p>CO<sub>2</sub></p>

Similar Reads