<sub>

Overview

The <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₂

Using the <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>

The output:

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.

Attribute Breakdown

The <sub> element doesn't have any specific attributes; it inherits global attributes common to all HTML elements.

Accessibility Aspects

The <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-label or aria-labelledby for naming the element. Still, it can accept global aria-* attributes for potential roles it might assume.

Associated Elements

• <sup>

Additional Notes

• The <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-align property with values like sub is the appropriate choice.

• The <sub> element cannot be used simultaneously with the <sup> element to produce both a subscript and a superscript adjacent to each other.

• For detailed mathematical notations involving subscripts and superscripts, MathML (Mathematical Markup Language) is a fitting choice. MathML is an XML-based language and integrates seamlessly with other web standards including HTML, CSS, DOM, and JavaScript. It's designed to describe mathematical notations while capturing their structure and content. In MathML, elements like <msub>, <msup>, and <msubsup> cater specifically to such needs.

Browser Compatibility

For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.

Useful Resources

Can I use HTML element: sub

The HTML Living Standard Specification: sub and sup