HTML <sub> Tag
The <sub> tag in HTML is used to define subscript text. Subscript text is displayed half a character below the normal line of text. It is often used for chemical formulas, mathematical equations, and footnotes.
Syntax
<sub>text</sub>
Attributes
The <sub> tag supports the Global Attributes in HTML.
| Attribute | Value | Description |
|---|---|---|
| None | None | The <sub> tag does not have any specific attributes, only global attributes. |
Example
<p>This is a normal text, and this is a <sub>subscripted</sub> text.</p>
More Examples
Example 1: Chemical Formula
Using <sub> for chemical formulas is a common and practical use case.
<p>The chemical formula for water is H<sub>2</sub>O.</p>
<p>Glucose's formula is C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>.</p>
Example 2: Mathematical Equations
In mathematics, subscripts can represent different indices or variables.
<p>In the equation x<sub>1</sub> + x<sub>2</sub> = y, x<sub>1</sub> and x<sub>2</sub> are subscripted variables.</p>
<p>The area of a circle is πr<sup>2</sup>; here <sup>2</sup> is superscript but we can also use subscript like r<sub>a</sub> for radius a.</p>
Example 3: Combining with other formatting tags
The <sub> tag can be combined with other text formatting tags like <strong> and <em>.
<p>This is <strong>normal text</strong> with <em>emphasized</em> <sub>subscript</sub> text.</p>
Example 4: Within headings
The <sub> tag works well within heading tags too.
<h1>This is a Heading with Subscript H<sub>2</sub>O</h1>
<h2>Another Heading with a different subscript X<sub>n</sub></h2>
Example 5: Nested subscripts
Nesting <sub> tags although possible, is generally not recommended as it can make the text hard to read. However, here is an example:
<p>This is a<sub>sub1</sub> nested<sub>sub2</sub> subscript.</p>
Browser Support
The <sub> tag is supported by all modern browsers:
| Browser | Version |
|---|---|
| Chrome | 1+ |
| Edge | 12+ |
| Firefox | 1+ |
| Safari | 1+ |
| Opera | 1+ |
Notes and Tips
- The
<sub>tag should not be used for purely visual formatting, use CSS for that purpose. - For superscript text (text above the baseline), use the
<sup>tag. - When using subscripts in mathematical equations or scientific text, consider using MathML for more complex equations.
- Make sure that the subscript text is still readable by considering the font size and context.
- Avoid overusing nested
<sub>tags because it can decrease the readability of your content. - Using
<sub>semantically conveys that the text is a subscript, improving accessibility and SEO.
