<sub> element defines inline text that should be displayed as a subscript, used primarily to represent typographical conventions that have specific meanings. Commonly, subscripts appear with a lowered baseline and are typically rendered in a smaller text size than the surrounding content.
Examples and Usage
Subscripts are often used in scientific notation, chemical formulas, and footnotes. For instance, in the context of chemistry, subscripts can indicate the number of atoms of each element present in a compound:
<p> Theobromine, prevalent in cocoa and chocolate, has the chemical formula C <sub>7</sub>H <sub>8</sub>N <sub>4</sub>O <sub>2</sub> </p>
The rendered output appears as:
Theobromine, prevalent in cocoa and chocolate, has the chemical formula C₇H₈N₄O₂
<sub> element in this context ensures the correct representation of the chemical structure.
Another potential use of the subscript is in academic writings or articles to denote footnotes:
<p>According to recent studies<sub>1</sub>, the use of renewable energy has significantly increased.</p>
According to recent studies₁, the use of renewable energy has significantly increased.
If the goal is to achieve subscript styling without conveying a specific meaning, it's advisable to use CSS techniques.
<sub> element doesn't have any specific attributes; it inherits global attributes common to all HTML elements.
<sub> element doesn't have a direct role in ARIA (Accessible Rich Internet Applications). Even though a
subscript role exists, it's not typically linked with this element. It's advisable not to use
aria-labelledby for naming the element. Still, it can accept global
aria-* attributes for potential roles it might assume.
<sub>element should be used when there's a meaningful context for the subscript in the content. For design-driven purposes without specific connotations, CSS's
vertical-alignproperty with values like
subis the appropriate choice.
<sub>element cannot be used simultaneously with the
<sup>element to produce both a subscript and a superscript adjacent to each other.
<msubsup>cater specifically to such needs.
For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.