<sub> HTML Tag
- 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
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.