<sub> HTML Tag

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Element of
Learn How Fonts And Web Typography Work In HTML: A Beginner's Guide
What does <sub> HTML Tag do?
The <sub> element is used to identify characters that should be rendered in a subscript position. The element should be used mark text according to typographical conventions and not stylistic purposes. Text that is to appear subscript for purely stylistic purposes should be styled with CSS.
Display
inline
Usage
textual

Code Example

<p>The basic formula for water is H<sub>2</sub>0.</p>

The basic formula for water is H20.

When are Subscripts Used?

Anytime a letter or number should appear as a subscript for reasons that are not purely stylistic, the <sub> element is appropriate. However, if the effect is being applied for purely stylistic purposes, use CSS. In particular, check out this free CSS snippet at GitHub which you can use to add subscripts and superscripts with CSS rather than by using the HTML <sub> and <sup> elements. Let’s take a look at how those CSS rendered subscripts compare to those applied by the HTML<sub> element.

<style> .sub, .sup {   font-size: 75%;   line-height: 0;   position: relative;   vertical-align: baseline; }   .sub {   bottom: -0.25em; } .sup {   top: -0.5em } </style> <p>In some cases, such as the when dealing with a chemical formula like H<sub>2</sub>0, it's appropriate to use the <code>sub</code> element.</p> <p>In other cases, such as when adding subscripts for stylistics purposes to a logo like <a href="https://latex-project.org/" target="_blank">L<sup>A</sup>T<sub>E</sub>X</a>, you should really use CSS to create the desired effect.</p> 

Let’s see what our browser does with that bit of code.

.sub, .sup{font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}.sub{bottom: -0.25em;}.sup{top: -0.5em}In some cases, such as the when dealing with a chemical formula like H20, it’s appropriate to use the sub element.

In other cases, such as when adding subscripts for stylistics purposes to a logo like LATEX, you should really use CSS to create the desired effect.

Adam is a technical writer who specializes in developer documentation and tutorials.