HTML Superscript

The superscripted text refers to the text that appears slightly above the standard text. Consider the text that follows for reference: 2nd. In this example, “nd” is the superscripted text. Even in HTML, you can make your text appear superscripted by using the “sup” tag. In this article, we will learn the usage of the “sup” tag in HTML.

Usage of the Superscript Tag in HTML

The usage of the superscript tag in HTML is simple and easy. You can go through the following two examples to find it out.

Example # 1: The Pythagoras Theorem

The most common usage of superscript formatting can be seen in mathematical equations. Pythagoras Theorem is one of the most well-known mathematical equations. In this example, we will use the superscript tag of HTML for displaying the equation of the Pythagoras Theorem on our web page, in which we have created the HTML script shown below:

In the previous HTML script shown, we have used the “h1” tag of HTML for displaying the heading of the Pythagoras Theorem on our web page. Then, we have used the “var” tags for enclosing our base variables of the equation and the “sup” tags for enclosing the exponents of the equations that are to be superscripted.

The equation of the Pythagoras Theorem is displayed perfectly on the following web page:

Example # 2: Square Root and Current Date

In this example, we will discuss a few more usage scenarios of the superscript tag of HTML, i.e., printing the square root of a number and the current date. For doing that, we have designed the HTML script shown in the following image:

In this example, we wanted to print the square root of the number “8”. Because of which we have enclosed this number and its square root within the “var” tag ,whereas the exponent of the equation, i.e., 2 inside the “sup” tag. Then, for printing the current date on the web page, we have enclosed everything inside the “var” tag and have used the “sup” tag for enclosing the “st” of “21st”, so that it can easily be superscripted.

Our superscripted text is shown on the following web page:


In this article, the superscript tag and its usage have been explained in the most straightforward manner. We discussed two very basic examples to demonstrate the usage of this tag in HTML to you. After going through this guide, you can easily use the “sup” tag of HTML. Hence, you will be able to write mathematical equations like a pro.

About the author

Ayesha Sajid

Ayesha Sajid has secured a Bachelor's degree in Computer Sciences and a Master's degree in Information Security. She is a technical content writer by profession who has around four years of experience in working with Windows and different flavors of the Linux operating system. She also has a keen interest in exploring the latest technology trends.