W3docs
en
Log in

HTML <sub> Tag

The <sub> tag is used to define the subscript text that appears half a character below the line, and is rendered in a smaller font. See examples and Syntax.

The HTML <sub> tag marks up subscript text — characters that sit half a line below the baseline and are rendered slightly smaller. It is an inline, semantic element: it tells the browser (and assistive technology) that the enclosed text is a subscript, not just that it should look lowered.

Use <sub> only where the lowered position carries typographical meaning. It is not a general-purpose "make this smaller and lower" tool — if you only want the visual effect without the meaning, reach for CSS instead (covered below).

When to use <sub>

A subscript is meaningful in several contexts:

  • Chemical formulas — the count of atoms: H2O, CO2, C2H5OH.
  • Mathematical indices and subscripts — sequence terms and variable indices: x1, x2, …, an.
  • Logarithm bases — log2(n), log10(x).
  • Footnote / reference markers that, by convention, are typeset low rather than high.

In every case the subscript changes the meaning of the surrounding text: CO2 and CO<sub>2</sub> are read differently. That semantic difference is exactly what <sub> exists to express — and why CSS styling alone is not a substitute.

Tip

To define superscript text (raised above the baseline, e.g. exponents like x2 or ordinals like 1st), use the <sup> tag.

<sub> vs <sup>

Both are semantic typographic elements; they differ only in direction and in the conventions that govern when each is correct.

<sub> (subscript)<sup> (superscript)
PositionBelow the baselineAbove the baseline
Typical usesAtom counts (H2O), math indices (xn), log basesExponents (x2), ordinals (2nd), footnote markers
Reading"x sub n""x to the power n", "2nd"

Pick the element that matches the established convention for the notation, not the one that "looks right" — a chemical count is always a subscript, an exponent is always a superscript.

Syntax

The <sub> tag comes in pairs. The subscript content is written between the opening <sub> and closing </sub> tags.

<p>Formula of water — H<sub>2</sub>O</p>

Examples

Chemical formulas

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Formula of water - H<sub>2</sub>O, formula of alcohol - C<sub>2</sub>H<sub>5</sub>OH</p>
  </body>
</html>
Try it Yourself »
Result

<sub> together with <sup>

Subscript and superscript often appear in the same document — one for chemical counts, the other for exponents:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>
      The formula of water is H<sub>2</sub>O, and the formula of alcohol is C<sub>2</sub>H<sub>5</sub>OH
    </p>
    <p>
      E = mc<sup>2</sup>, where E — kinetic energy, m — mass, c — the speed of light.
    </p>
  </body>
</html>
Try it Yourself »

If you only want the visual effect, use CSS

If text needs to look like a subscript but is not semantically a subscript, do not abuse <sub>. Apply CSS vertical-align with the sub value (plus a smaller font-size) to the appropriate element instead. The example below restyles ordinary text purely for presentation — note that no <sub> element is used:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .lowered {
        vertical-align: sub;
        font-size: small;
      }
    </style>
  </head>
  <body>
    <h1>Lowered text without the sub tag</h1>
    <p>
      Here is some <span class="lowered">visually lowered</span> text.
    </p>
  </body>
</html>
Try it Yourself »

Accessibility

Screen readers do not announce subscript consistently — some read H<sub>2</sub>O as "H two O" with no indication that the 2 is lowered, others pause or change pitch, and many ignore the distinction entirely. Because the position can carry meaning that is lost in speech, prefer a clear, unambiguous source for important notation:

  • For complex formulas and equations, consider providing a plain-text or spoken-friendly alternative (for example, write "log base 2 of n" in nearby text, or use MathML for true mathematical markup).
  • Don't rely on <sub> alone to convey something a reader must understand — make sure the surrounding sentence still reads correctly when the subscript is announced flatly.

Attributes

The <sub> tag supports the Global attributes and the Event Attributes. It has no attributes of its own.

Styling <sub>

Browsers give <sub> a default smaller font and lowered position. You can adjust its appearance with CSS while keeping the element's meaning intact:

sub {
  color: #555;
  font-size: 0.8em;
}

Note: this overrides the browser's default <sub> styling for demonstration only — the subscript meaning is unchanged.

Practice

Practice
What is the correct usage and syntax for the HTML <sub> tag as per the w3docs.com guide?
What is the correct usage and syntax for the HTML <sub> tag as per the w3docs.com guide?
Was this page helpful?