HTML Superscript and Subscript Tutorial

Understanding HTML Superscript and Subscript

HTML provides the and elements for text that needs to appear above or below the normal line of text because of its meaning.

Superscript is commonly used for exponents, ordinal indicators, and reference marks, while subscript is often used in chemical formulas and mathematical notation. These elements should be used when the raised or lowered position is meaningful to the content.

Superscript Text with

The element represents superscript text. Its content is normally displayed above the baseline and in a smaller font than the surrounding text.

<p>The value of 5<sup>2</sup> is 25.</p>

In this example, the number 2 is an exponent, so its raised position has meaning rather than being used only for visual effect.

Subscript Text with

The element represents subscript text. Its content is normally displayed below the baseline and in a smaller font than the surrounding text.

<p>The chemical formula for water is H<sub>2</sub>O.</p>

The lowered number 2 is part of the chemical formula and indicates that a water molecule contains two hydrogen atoms.

Superscript for Exponents

One common use of the element is representing exponents in mathematical expressions.

<p>4<sup>3</sup> = 64</p>

<p>The area is measured in m<sup>2</sup>.</p>

Superscript can be useful for relatively simple mathematical notation. More complex mathematical expressions may require specialized markup such as MathML.

Subscript for Chemical Formulas

The element is commonly used to represent the numbers that appear below the baseline in chemical formulas.

<p>Water: H<sub>2</sub>O</p>

<p>Carbon dioxide: CO<sub>2</sub></p>

<p>Glucose: C<sub>6</sub>H<sub>12</sub>O<sub>6</sub></p>

Using keeps the numbers part of the surrounding text while correctly identifying them as subscript content.

References and Ordinals

Superscript can also appear in reference markers and ordinal indicators when the raised position is part of the notation being represented.

<p>This statement requires additional explanation.<sup>1</sup></p>

<p>She finished 1<sup>st</sup> in the competition.</p>

For footnotes and similar references, the superscript marker can also contain a link that takes the reader to the corresponding note elsewhere on the page.

<p>Additional information is available in the notes.<sup><a href="#note-1">1</a></sup></p>

HTML Superscript and Subscript Example

The following example demonstrates several common uses of superscript and subscript text.

<h2>Superscript Examples</h2>
<p>5<sup>2</sup> = 25</p>
<p>Area: 100 m<sup>2</sup></p>

<h2>Subscript Examples</h2>
<p>Water: H<sub>2</sub>O</p>
<p>Carbon dioxide: CO<sub>2</sub></p>

Try changing the values or moving the and elements in the editor to see how they affect the text.

Play in Editor

Superscript and Subscript vs CSS

Use and when the raised or lowered position is part of the meaning of the content. Do not use these elements simply because you want text to appear higher or lower than surrounding text.

If text needs to be repositioned only for visual design, CSS should be used instead. HTML should describe the meaning of the content, while CSS controls its presentation.

Superscript and Subscript Best Practices

Use when superscript positioning is meaningful to the content.
Use when subscript positioning is meaningful to the content.
Use superscript for appropriate content such as exponents, reference markers, and ordinal indicators.
Use subscript for appropriate content such as chemical formulas and technical notation.
Do not use or solely to reposition text for visual design.
Consider MathML when mathematical expressions become too complex for simple superscript and subscript markup.

Summary

The HTML element represents superscript text, while represents subscript text. They are useful for content such as exponents, units, reference markers, ordinal indicators, chemical formulas, and other notation where the raised or lowered position contributes to the meaning.

HTML Superscript and Subscript