Format HTML superscript and subscript

If you create websites or website content with content management systems (CMS, e.g. WordPress), for example, it may be necessary to format texts or parts of texts in subscript or superscript or for better readability.

Application cases

The most common use cases are likely to be indices, mathematical formulas, chemical formula symbols or units

• • Indices: V_critical
  • Formula: f(x) = x⁵ – x⁴ = x⁴(x-1)
  • chemical symbols: C₄H₆O₂ (polyvinyl acetate)
  • Units: m⁴ (moment of inertia per unit area)

Note: For square metres (m²) and cubic metres (m³), i.e. high 2″ or “high 3″ in general, no special HTML tags are required. There are corresponding Unicode characters for this or you can simply use the keyboard “Alt Gr + 2” for ² and “Alt Gr + 3” for ³.

Superscript text with HTML tag <sup>

How can you now display a superscript text using HTML tags, such as our formula f(x) = x⁵ – x⁴ ? This is done by using the HTML tag <sup> and embedding all characters that should appear as superscripts. The example formula would then be written in the HTML code as follows

f(x) = x<sup>5</sup> - x<sup>4</sup>

Subscript text with HTML tag <sub>

If you want to display subscript text, e.g. an index, then use the HTML tag <sub>. Using the example of our chemical formula for polyvinyl acetate mentioned above (C₄H₆O₂), the corresponding HTML code looks like this:

C<sub>4</sub>H<sub>6</sub>O<sub>2</sub>

Subscript and superscript text at the same time

It often happens with formulas that the individual formula characters and variables have both indices and superscript symbols, such as a literally written “x one squared”.

• x₁²

This can also be displayed using the tags mentioned above:

x<sub>1</sub><sup>2</sup>ddd

This works for simple short representations, but doesn’t look as good as from a formula editor. As soon as things get a little more complicated or complex with the world of formulae, it is advisable to use MathML, a markup language for displaying formulae.

Danger of confusion

The two HTML tags to be used for superscript and subscript text are confusingly similar, as they only differ in the last letter. It is a little easier to remember if you understand or memorise the HTML tags as abbreviations for the corresponding English terms:

• superscript => sup
• subscript => sub