HTML <sub> Tag

The HTML <sub> tag is used to define subscript text. Subscript text appears smaller and is positioned slightly below the normal line of text. This tag is commonly used in mathematical expressions, chemical formulas, and annotations where subscript text is required.

Subscript text can be styled further using CSS, but the <sub> tag provides semantic meaning for the text it encloses, making it more accessible and understandable for assistive technologies.

Basic Syntax of HTML <sub> Tag

The basic structure of the <sub> tag is:

</>
Copy
<p>This is normal text with a <sub>subscript</sub>.</p>

The <sub> tag only changes the visual placement of the text while preserving its semantic meaning.

Example of Using the <sub> Tag

Here’s an example where the <sub> tag is used in a chemical formula:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Chemical Formula Example</h2>
        <p>The chemical formula for water is H<sub>2</sub>O.</p>
    </body>
</html>
Example of Using the <sub> Tag

Explanation: The “2” in H2O is displayed as a subscript, following the standard notation for chemical formulas.

Styling the <sub> Tag with CSS

You can use CSS to further customize the appearance of subscript text:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            sub {
                font-size: 0.8em;
                color: #007BFF;
            }
        </style>
    </head>
    <body>
        <h2>Styled Subscript Example</h2>
        <p>The chemical formula for water is H<sub>2</sub>O.</p>
    </body>
</html>
Styling the <sub> Tag with CSS

Result: The subscript “2” in H2O is styled with a smaller font size and a blue color for better visibility.

Attributes of HTML <sub> Tag

  • Global Attributes: The <sub> tag supports all global attributes like id, class, and style.
  • Event Attributes: You can attach event handlers such as onclick or onmouseover to the <sub> tag.

These attributes allow you to style or add interactivity to the subscript text.

Practical Applications of the <sub> Tag

  • Chemical Formulas: Represent subscripts in formulas like H2O or CO2.
  • Mathematical Notations: Display variables or indices, such as x1, x2, etc.
  • Annotations: Add references or footnotes in text (e.g., “Reference1“).
  • Scientific Notations: Use subscript for units or variables in physics and other sciences.

The <sub> tag is a simple yet effective way to format subscript text for scientific, mathematical, or technical content while maintaining semantic meaning.