HTML <sub> subscript tag


The <sub> tag in HTML is used to display subscript text. Subscript text appears slightly lower than the baseline of the surrounding text and is often used in mathematical or scientific contexts, such as chemical formulas or mathematical expressions.

Key Features:

  • Subscript Text: Renders text in a smaller size and lower position compared to the surrounding text.
  • Semantic Meaning: Indicates that the text has a subscript format, typically used for specific notations.

Basic Syntax:

<p>H<sub>2</sub>O</p>

In this example:

  • The <sub> tag is used to display "2" as a subscript in the chemical formula for water (H₂O).

Example:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sub Tag Example</title> </head> <body> <p>The formula for water is H<sub>2</sub>O.</p> <p>The mathematical expression x<sub>1</sub> + x<sub>2</sub> = x<sub>total</sub></p> </body> </html>

In this example:

  • The <sub> tag is used to format "2" in H₂O as a subscript, as well as the numbers in the mathematical expression.

Use Cases:

  • Chemical Formulas: Displaying subscripts in chemical equations, such as H₂O or CO₂.
  • Mathematical Notations: Showing subscripts in mathematical formulas, such as x₁ or x₂.
  • Footnotes: Indicating footnote references in some contexts, though this is less common.

Styling:

You can use CSS to further style subscript text if needed. By default, the <sub> tag applies a lower position and smaller font size.

sub { font-size: 0.8em; /* Optional: adjust the font size */ vertical-align: sub; /* Ensures the text is aligned correctly */ }

Key Points:

  • Purpose: The <sub> tag is used to display text in subscript format, which is smaller and positioned lower than the surrounding text.
  • Usage: Common in scientific formulas, mathematical expressions, and specific notations.
  • Styling: By default, the browser renders subscript text in a smaller font and lower position, but additional styling can be applied with CSS.

In summary, the <sub> tag in HTML is used to render text as a subscript, making it smaller and positioned lower than the surrounding text. It is commonly used for scientific, mathematical, and other specialized notations where subscript formatting is needed.