HTML Basics: Enhancing Your Words – How to Utilize sub and sup for Subscript and Superscript

Subscript or Superscript Text with SUB resp. SUP

Both SUB and SUP are HTML inline elements. They do not generate an automatic line break.

Sometimes text needs to be subscripted or superscripted. The two HTML tags sub (subscript) and sup (superscript) are used to markup text as subscript (e.g. H₂O) or superscript (e.g. y = x²). Most web browsers use half the font size and the same font for the text in SUB resp. SUP as for the rest of the text.

Text subscripted with SUB or superscripted with SUP will interfere with the normal flow of the running text. However, this can be corrected with CSS.

We provide you with a list of appropriate Unicode Numbers for subscript or superscript numbers.

The HTML <sub> Tag

Subscript text
The HTML SUB tag marks up a part of the running text as subscript. The subscripted text starts with _{and has to be closed with}. The SUB tag has no semantic meaning.

The HTML <sup> Tag

Superscript text
The HTML HTML SUP tag marks up the text as superscript. The superscripted text starts with ^{and has to be closed with}. The SUP tag has no semantic meaning, just like the SUB tag.

Subscript text with <sub> resp. superscript text with <sup>

With clear and azure-blue H<sub>2</sub>O over an area of more than 50km<sup>2</sup> the sea is impressive and the snow-white sails of the <b>Sunrise Aurora</b><sup>TM</sup> attract attention due to their different line heights.

Use SUB and SUP to Create Simple Formulas

To display a formula on a web page, an image is usually used because HTML does not really do a good job with formulas. However, you can create simple formulas using the SUB and SUP HTML tags. These formulas will not become blurred or pixelated when the page is zoomed.

With UTF-8, many different Special Characters are available for creating formulas.

Create simple formulas with <sub> und <sup>.

CO<sub>2</sub> + H<sub>2</sub>O ⇒ H<sub>2</sub>CO<sub>3</sub>