HTML Basics: Elevate Your Text Game – Mastering Subscript and Superscript for Awesome Formatting

Deutsch

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. H2O) or superscript (e.g. y = x2). 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 <sub> and has to be closed with </sub>. 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 <sup> and has to be closed with </sup>. The SUP tag has no semantic meaning, just like the SUB tag.

Example

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.

To better demonstrate the annoying effect of SUB and SUP, the maximum width of the paragraph in the example is also limited by CSS.

Output of the HTML code

With clear and azure-blue H2O over an area of more than 50km2 the sea is impressive and the snow-white sails of the Sunrise AuroraTM 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.

Example

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

CO<sub>2</sub> + H<sub>2</sub>O ⇒ H<sub>2</sub>CO<sub>3</sub>
Output of the HTML code
CO2 + H2O ⇒ H2CO3