🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Exercises.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
REFERENCEhtml

html Documentation

LOADING ENGINE...

<sub>

AI & DATA SCIENCE // sub-tag

The <sub> element renders text as subscript — shifted below the baseline in a smaller font, commonly used for chemical formulas and footnote markers.

Syntax

H<sub>2</sub>O

Deep Dive Course

**`<sub>`** shifts its content below the normal text baseline and typically shrinks the font size, matching the typographic convention for subscript. The most common use case is chemical formulas, like H<sub>2</sub>O or CO<sub>2</sub>, where the subscript number is part of the compound's name, not a footnote or citation marker (which typically uses `<sup>` instead).

1Understanding <sub>

`<sub>` shifts its content below the normal text baseline and typically shrinks the font size, matching the typographic convention for subscript. The most common use case is chemical formulas, like H<sub>2</sub>O or CO<sub>2</sub>, where the subscript number is part of the compound's name, not a footnote or citation marker (which typically uses <sup> instead).

💡

Don't use <sub> purely for visual/layout adjustments like fine-tuning vertical alignment — that's a job for CSS vertical-align, not a semantic subscript element.

editor.html
<p>Water is H<sub>2</sub>O and carbon dioxide is CO<sub>2</sub>.</p>
localhost:3000

2Practical Example

Here is a real-world application of <sub> showing how it is used in production HTML.

editor.html
<!-- Mathematical subscript notation -->
<p>The sequence is defined as a<sub>n</sub> = a<sub>n-1</sub> + 2</p>
localhost:3000

3Best Practices

Follow these guidelines when working with <sub>:

1. Use <sub> for genuine subscript notation like chemical formulas (H<sub>2</sub>O)

2. Don't use it purely to shrink or lower text for styling reasons

3. Keep subscript content short — a character or two, not full sentences

⚠️

Tip: Don't use <sub> purely for visual/layout adjustments like fine-tuning vertical alignment — that's a job for CSS vertical-align, not a semantic subscript element.

editor.html
<p>Water is H<sub>2</sub>O and carbon dioxide is CO<sub>2</sub>.</p>
localhost:3000

Examples

Example 01Basic Usage
<p>Water is H<sub>2</sub>O and carbon dioxide is CO<sub>2</sub>.</p>
Example 02Advanced Example
<!-- Mathematical subscript notation -->
<p>The sequence is defined as a<sub>n</sub> = a<sub>n-1</sub> + 2</p>

Best Practices

  • Use for genuine subscript notation like chemical formulas (H2O)
  • Don't use it purely to shrink or lower text for styling reasons
  • Keep subscript content short — a character or two, not full sentences

Interview Question

When would you use <sub> versus <sup>?

Hint: Think about chemistry formulas versus footnotes and exponents.

<sub> is for subscript notation below the baseline — most commonly chemical formulas like H2O, or mathematical subscripts like a_n. <sup> is for superscript notation above the baseline — exponents like x², ordinal indicators like 1st, or footnote reference markers. The choice depends entirely on the notation convention you're representing, not visual preference.

Exercises

EasyPractice using <sub> in a real scenario.
View Solution
<p>Water is H<sub>2</sub>O and carbon dioxide is CO<sub>2</sub>.</p>

Frequently Asked Questions

When would you use <sub> versus <sup>?

is for subscript notation below the baseline — most commonly chemical formulas like H2O, or mathematical subscripts like a_n. is for superscript notation above the baseline — exponents like x², ordinal indicators like 1st, or footnote reference markers. The choice depends entirely on the notation convention you're representing, not visual preference.

Related Functions

sup-tag