Table of contents
1.
Introduction
2.
Superscript
3.
Syntax  
4.
Example
4.1.
Example 1: Superscript in Mathematics
4.2.
Example 2: Superscript in Ordinals
4.3.
Example 3: Superscript in Footnotes
5.
Attributes (Global + Event)  
5.1.
Global Attributes  
5.2.
Event Attributes  
6.
How to Use the `<sup>` Tag in HTML  
6.1.
Example 1: Mathematical Equations  
6.2.
Example 2: Scientific Notations  
6.3.
Example 3: Footnotes  
6.4.
Example 4: Abbreviations  
7.
Combining with CSS  
8.
Supported Browsers
9.
Frequently Asked Questions
9.1.
What is the purpose of the <sup> tag in HTML?
9.2.
How does the <sup> tag affect text formatting?
9.3.
Is the <sup> tag supported on all browsers?
10.
Conclusion
Last Updated: Jan 11, 2025
Easy

<Superscript> in HTML

Author Gaurav Gandhi
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

HTML provides various ways to style and format text to make it more meaningful and visually appealing. One such feature is the superscript element. The superscript element <sup> is used to display text slightly above the normal line. It is commonly used in mathematical expressions, scientific notations, or any situation where superscript formatting is needed. 

<Superscript> in HTML

In this article, we will discuss how to use the <sup> tag in HTML, see examples, and understand browser support.

Superscript

The <sup> tag in HTML is used to define superscript text. Superscript text is displayed smaller than the surrounding text and appears slightly higher on the line. This formatting is often used in:

  • Mathematical expressions (e.g., exponents like x²).
     
  • Ordinal numbers (e.g., 1st, 2nd).
     
  • Footnotes or references.

Syntax  

The `<sup>` tag in HTML is  easy to use. It is an inline element, meaning it doesn’t start on a new line & only takes up as much width as necessary. The syntax for the `<sup>` tag is simple:  

<sup>Your superscript text here</sup>


In this syntax:  

  • `<sup>` is the opening tag that tells the browser to start rendering the enclosed text as superscript.  
     
  • `Your superscript text here` is the content that will appear as superscript.  
     
  • `</sup>` is the closing tag that tells the browser to stop rendering the text as superscript.  


For example, if you want to display "E=mc²" in your HTML document, you would write:  

<p>E=mc<sup>2</sup></p>


This will display as:  

E=mc²  


The `<sup>` tag is supported by all modern browsers, so you don’t have to worry about compatibility issues. It’s a simple yet powerful tool for adding clarity & professionalism to your web content.  

Example

Example 1: Superscript in Mathematics

Here is an example of using the <sup> tag to represent a mathematical expression:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Superscript Example</title>
</head>
<body>
    <h1>HTML Superscript Example</h1>
    <p>The formula for the area of a square is: A = s<sup>2</sup></p>
</body>
</html>


Output

Output

Example 2: Superscript in Ordinals

Let’s use the <sup> tag to display ordinal numbers:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Superscript Ordinal Numbers</title>
</head>
<body>
    <h1>Ordinal Numbers</h1>
    <p>The 1<sup>st</sup> prize goes to Alice, and the 2<sup>nd</sup> prize goes to Bob.</p>
</body>
</html>


Output

Output

Example 3: Superscript in Footnotes

Superscripts are also useful for references and footnotes.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Superscript Footnotes</title>
</head>
<body>
    <h1>Superscript for Footnotes</h1>
    <p>This article was written by John Doe<sup>1</sup>.</p>
    <footer>
        <p><sup>1</sup>John Doe is a professional content writer.</p>
    </footer>
</body>
</html>


Output

Output

Attributes (Global + Event)  

The `<sup>` tag supports global attributes & event attributes, just like most other HTML elements. These attributes enhance the functionality & interactivity of the `<sup>` tag. Let’s discuss them in detail.  

Global Attributes  

Global attributes are common to all HTML elements. They can be used with the `<sup>` tag to add extra features. Some of the most commonly used global attributes include:  

1. class: Assigns one or more class names to the `<sup>` element. This is useful for styling with CSS.  

   <p>E=mc<sup class="math-sup">2</sup></p>


2. id: Provides a unique identifier for the `<sup>` element. This is helpful for JavaScript or CSS targeting.  

   <p>E=mc<sup id="superscript-example">2</sup></p>


3. style: Allows inline CSS styling for the `<sup>` element.  

   <p>E=mc<sup style="color: red; font-size: 14px;">2</sup></p>


4. title: Adds a tooltip that appears when the user hovers over the `<sup>` element.  

   <p>E=mc<sup title="This is a superscript">2</sup></p>

Event Attributes  

Event attributes enable interactivity by triggering JavaScript functions when specific actions occur. Some commonly used event attributes include:  

1. onclick: Executes a script when the `<sup>` element is clicked.  

   <p>E=mc<sup onclick="alert('Superscript clicked!')">2</sup></p>


2. onmouseover: Triggers a script when the user hovers over the `<sup>` element.  

   <p>E=mc<sup onmouseover="this.style.color='blue'">2</sup></p>


3. onmouseout: Triggers a script when the user moves the mouse away from the `<sup>` element.  

   <p>E=mc<sup onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">2</sup></p>


These attributes make the `<sup>` tag versatile & interactive. You can combine global & event attributes to create dynamic & visually appealing content.  

How to Use the `<sup>` Tag in HTML  

Using the `<sup>` tag in HTML is simple & practical. It’s commonly used in mathematical equations, scientific notations, footnotes, & even abbreviations. Let’s explore how to use it effectively with examples.  

Example 1: Mathematical Equations  

Superscript is often used in mathematical expressions. For instance, to display "x² + y² = z²", you would write:  

<p>x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup></p>

This will render as:  

x² + y² = z²  

Example 2: Scientific Notations  

In scientific writing, superscript is used for exponents or notations like "10⁶". Here’s how you can write it:  

<p>10<sup>6</sup></p>


This will display as:  

10⁶  

Example 3: Footnotes  

Superscript is also used for footnotes or references in articles. For example:  

<p>This is a sample sentence with a footnote<sup>1</sup>.</p>
<p><sup>1</sup>This is the footnote content.</p>


This will appear as:  

This is a sample sentence with a footnote¹.  
¹This is the footnote content.  

Example 4: Abbreviations  

Sometimes, superscript is used for abbreviations like "1ˢᵗ" for "1st". Here’s how you can do it:  

<p>He finished in 1<sup>st</sup> place.</p>


This will render as:  

He finished in 1ˢᵗ place.  

Combining with CSS  

You can style the `<sup>` tag using CSS to make it more visually appealing. For example:  

<style>
  sup {
    color: blue;
    font-size: 12px;
    vertical-align: super;
  }
</style>
<p>E=mc<sup>2</sup></p>


This will make the superscript text blue & slightly smaller than the normal text.  

The `<sup>` tag is a small but powerful tool in HTML. It helps make your content more readable & professional, especially when dealing with technical or scientific topics.  

Supported Browsers

The <sup> tag is widely supported by all major browsers, ensuring consistent display across devices.

BrowserSupported Versions
Google ChromeAll versions
Mozilla FirefoxAll versions
Microsoft EdgeAll versions
SafariAll versions
OperaAll versions


With such comprehensive browser support, you can confidently use the <sup> tag without compatibility concerns.

Frequently Asked Questions

What is the purpose of the <sup> tag in HTML?

The <sup> tag is used to create superscript text, which appears slightly above the normal line. It is commonly used for exponents, ordinals, and footnotes.

How does the <sup> tag affect text formatting?

The <sup> tag reduces the font size and raises the text slightly above the normal text line. This makes it visually distinct and is typically used for mathematical expressions or footnotes.

Is the <sup> tag supported on all browsers?

Yes, the <sup> tag is supported by all major browsers, including Chrome, Firefox, Safari, Edge, and Opera.

Conclusion

The <sup> tag in HTML is a simple yet powerful tool for adding superscript formatting to your text. Whether you are working on mathematical formulas, ordinals, or references, the <sup> tag is essential for clean and professional web design. The examples provided in this article have shown how to implement superscript text effectively.

You can also check out our other blogs on Code360.

Live masterclass