Subscript and superscript tags (sub, sup)

What are Subscript and Superscript Tags

The <sub> and <sup> tags in HTML are used to create subscript and superscript text, respectively. Subscripts commonly appear in chemical formulas or mathematical expressions, while superscripts are often used for exponentiation or footnote markers. Both elements are inline and do not cause line breaks.

<p>The chemical formula for water is H<sub>2</sub>O</p>
<p>The square of 2 can be expressed as 2<sup>2</sup></p>

Basic Syntax and Use Cases

The <sub> tag defines subscript text, which browsers typically display in a smaller font size and lowered baseline. Common applications include:

• Chemical formulas: CO₂
• Mathematical variable subscripts: x₁ + x₂
• Special spellings in certain languages

The <sup> tag defines superscript text, which browsers usually display in a smaller font size and raised baseline. Typical uses include:

• Mathematical exponents: x³
• Ordinal indicators: 1^st
• Footnote markers: This is content requiring explanation^[1]

<p>Pythagorean theorem: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>
<p>Reference<sup>[1]</sup> indicates this phenomenon...</p>

Style Customization

Although browsers provide default styling, you can fully customize the appearance of subscripts and superscripts with CSS:

sub {
  font-size: 0.7em;
  vertical-align: sub;
  color: #e74c3c;
}

sup {
  font-size: 0.8em;
  vertical-align: super;
  background-color: #f1c40f;
  padding: 0 0.2em;
}

Complex Application Examples

Subscripts and superscripts can be nested or combined with other HTML elements:

<p>
  Chemical equation: 2H<sub>2</sub> + O<sub>2</sub> → 2H<sub>2</sub>O
  <sup>ΔH=-285.8 kJ/mol</sup>
</p>

<p>
  Taylor expansion: e<sup>x</sup> = 1 + x + x<sup>2</sup>/2! + x<sup>3</sup>/3! + ... + x<sup>n</sup>/n!
</p>

Applications in Mathematical Formulas

For displaying complex mathematical formulas, multi-level nesting may be required:

<p>
  Binomial theorem: (a + b)<sup>n</sup> = Σ<sub>k=0</sub><sup>n</sup> C(n,k)a<sup>n-k</sup>b<sup>k</sup>
</p>

<p>
  Integral formula: ∫<sub>0</sub><sup>∞</sup> e<sup>-x<sup>2</sup></sup> dx = √π/2
</p>

Interaction with Other HTML Elements

Subscripts and superscripts can contain links or other inline elements:

<p>
  For more information, refer to<sup><a href="#footnote1">[1]</a></sup>, which mentions CO<sub>2</sub> levels<sup><a href="#source">*</a></sup>...
</p>

Accessibility Considerations

Screen readers generally recognize these tags correctly. For more complex mathematical expressions, consider supplementing with aria-label:

<p>
  <span aria-label="x to the power of n">x<sup>n</sup></span> + 
  <span aria-label="y to the power of m">y<sup>m</sup></span>
</p>

Practical Development Notes

1. Avoid misusing subscripts/superscripts for visual styling; maintain semantic correctness
2. In responsive designs, you may need to adjust the font size ratio of subscripts/superscripts
3. Some fonts may not display subscripts/superscripts well, so testing is necessary

<style>
  @media (max-width: 600px) {
    sub, sup {
      font-size: 0.6em;
    }
  }
</style>

Browser Compatibility and Alternatives

All modern browsers support these tags. For very specific needs, CSS can be used to simulate them:

<span class="custom-sub">subscript</span>

<style>
  .custom-sub {
    font-size: smaller;
    vertical-align: sub;
    position: relative;
    bottom: -0.25em;
  }
</style>

Comparison with MathML

For professional mathematical content, MathML may be more suitable, but HTML subscripts/superscripts are lighter for simple scenarios:

<p>
  Simple formula with HTML: E=mc<sup>2</sup>
</p>

<!-- MathML example -->
<math>
  <msup>
    <mi>E</mi>
    <mn>2</mn>
  </msup>
</math>