Subscript or Superscript Text with SUB resp. SUP
Both SUB and SUP are HTML Inline Elements. They do not generate automatic line breaks.
Sometimes text needs to be subscripted or superscripted. The two HTML tags SUB (Subscript) and SUP (Superscript) are used to mark up text as subscript (e.g. H2O) or superscript (e.g. y = x2). Most web browsers use a smaller Font Size and the same typeface for SUB or SUP as they use for normal text.
Subscript or Superscript in text will interfere with the normal text flow. However, this can be corrected using CSS.
We provide a list of suitable subscript and superscriptUnicode Digits for building beautiful formulas.
The HTML <sub> Tag
Subscript Text
The SUB element marks up a range of text as a Subscript. This range is introduced with <sub> and must be concluded with the closing </sub> tag. Text marked up this way appears slightly below the baseline of regular text.
SUB is used for inline text that you want to appear as a subscript for typographical reasons only. Subscript is commonly used in
- Mathematical equations: for example y = x1 + x2
- Chemical formulas: for example H2O + CO2
- Technical references: for example Ai,j
The HTML <sup> Tag
Superscript Text
The SUP element marks up a range of text as a Superscript This range is introduced with <sup> and must be concluded with the closing </sup> tag. Text marked up this way appears slightly above the baseline of regular text.
SUP has been specifically designed for use with superscript text. It is easy to use and is supported by all of the major web browsers. SUP is used for inline text that you want to be displayed as supercript for typographical reasons only. Superscript is commonly used in
- Power notation for very large or very small numbers: for example
1010 = 10000000000 or 10-10 = 0.00000000001 - Chemical isotopes: for example Carbon-14 or Radiocarbon: 14C
- Notation of ordinal numbers: for example 1st, 2nd, 3rd, 4th, …
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.
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.
type="html"Create simple formulas with <sub> and <sup>
CO<sub>2</sub> + H<sub>2</sub>O ⇒ H<sub>2</sub>CO<sub>3</sub>