HTML – The Superscript Tag

Definition and Usage

The sup tag represents superscript inline text.

Usage Notes

In most browsers, text within the  tag is rendered smaller and positioned above the baseline by default.
The  tag is not intended solely for visual styling or decorative purposes.
It should be used to represent exponents, ordinal numbers, or other content that is conventionally displayed as superscript according to typographical rules or conventions.
Use this tag only when it clarifies that the content carries such semantic meaning.

Usage Examples

The  tag should be used to convey semantic meaning such as exponents or ordinal numbers according to typographical rules or conventions.

Using as an Exponent

Code Explanation
The <var> tag represents a variable.
It is used to indicate mathematical expressions, actual variables, or physical quantities.

Using for Ordinal Numbers

Note:
The  tag is not limited to representing only exponents or ordinal numbers as shown in the examples. It can be used for any superscript content according to typographical rules or conventions.

HTML Special Characters

Precautions

The  tag should be used to convey semantic meaning such as exponents or ordinal numbers according to typographical rules or conventions. It is not intended solely for visual styling or decorative purposes, and should only be used when it clarifies such meaning in the content.

Let's revisit the "Einstein's theory of relativity" example. Without the  tag, the intended meaning would change.

Now, let's see the same example without the  tag:

In this case, the 2 that represents the squared exponent is interpreted as a plain number multiplied by 2. One might argue this is just a styling issue, but considering web accessibility and screen readers, it is more than just a visual problem — the semantic meaning is actually lost.

The following example shows using a  styled with CSS to visually mimic superscript without using the  tag:

CSS rem and em Units

Do not use CSS styling to replace the  tag solely for visual purposes. Even if it looks correct, the semantic meaning is altered.

Next, let's examine the "fifth in English ordinal" example:

Now, let's mark it up without the  tag:

As you can see, leaving out the  tag does not break the syntax; it is not invalid HTML.

However, HTML provides tags with semantic meaning. It is recommended to use the most appropriate tag for the content.

Typographically or by convention, ordinal indicators should use the  tag. Using  ensures that the th is clearly recognized as an ordinal indicator, which aligns better with web standards and semantic HTML.