HTML / HTML Tags

HTML <Sub> Tag

Oct 12, 2022
2 min read
HTML sub Tag

Definition

The <sub> tag is an inline element that displays text as a subscript. The subscript text shows as smaller and with a lower baseline.

Example

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

H2O

Usage

  • Both the opening and closing tags are required.
  • The <sub> element should only be used for display purposes to adhere to any typographical conventions or standards. It does not convey any semantic meaning.
  • Use cases for the <sub> element include:
    • Mathematical formulas

      <p>The coordinate of the <var>i</var>th point is
      (<var>x<sub><var>i</var></sub></var>, <var>y<sub><var>i</var></sub></var>).

    • Chemical formulas

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

    • Abbreviations (where it is part of the typographical convention)

      <p>Their names are
      <span lang="fr"><abbr>M<sup>lle</sup></abbr> Gwendoline</span> and
      <span lang="fr"><abbr>M<sup>me</sup></abbr> Denise</span>.</p>

Attributes

The <sub> element only supports the Global Attributes.

Default CSS Settings

Most browsers will use the following default CSS to display the <sub> element:

sub {
  vertical-align: sub;
  font-size: smaller;
}

Best Practices

  • For marking up footnotes, see <sup>.

Does the <sub> element affect SEO?

While Google has been silent on whether the <sub> element affects SEO, it is unlikely that it makes any difference. Unlike other formatted words, there is no reference to it in their starter guide.

There are a few points worth considering, though. Let’s take H2O as an example.

If you search for “H2O,” you get the following:

Google search for H2O

If you search for “H2O Formula”, Google can represent the formula using subscript.

Google search for H2O Formula

If you search for “H₂O”, using Unicode in the search term, the search results are of lower quality, as presumably, it is looking for articles written using Unicode.

Google search for H2O in Unicode

However, using Unicode in place of the <sub> element is bad for accessibility, as assistive technologies have trouble interpreting it.

An example of this can be found below:

Another interesting point is that Google does not show <sub> elements formatted correctly in the search snippets and titles.

You might think that you would be better using Unicode characters that do show as formatted in the search results, but as all of the top results do not use Unicode versions you may wish to think twice about that.

Specification

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes