HTML sup Tag: How to Add Superscript in Web Pages

The HTML sup tag puts text above the normal line. Writers use it for math power and marks. So, readers can see the text smaller and higher on the page.

What is the HTML <sup> Tag?

The <sup> tag in HTML marks text that must rise above the baseline. Authors place it to show numbers like 2 in x2 or notes like 1 in a report.

You can place the <sup> tag around any text. The browser then lifts the text above the normal line.

Here is an example:

<p>Water is H<sup>2</sup>O</p>

The sup tag makes text smaller and higher than the main line. It does not change the meaning of the word but only its view on the page.

All modern browsers like Chrome, Firefox, Safari, and Edge support the sup tag. Old browsers also handle it, so you do not face issues.

The Differences Between <sup> and <sub> Tags

The sup tag raises text above the normal line. The sub tag drops text below the normal line. Both change only the place and size of the text.

Here is a table that shows you the key differences:

Writers use sup in math to write x² or show notes like 1. They use sub in chemical formulas like H2O or in math with a base and index.

How to Style the <sup> Tag in CSS

You can style the sup tag with CSS rules. For example, you can set font size, color, or move it up or down. This gives more control and matches the design of the site.

Here is an example:

sup {
  font-size: 12px;
  color: red;
  vertical-align: super;
}

Examples

Math power with sup tag:

<p>Square of 4 is 4<sup>2</sup> = 16</p>

This code shows how to write a math power with the sup tag. The number 2 goes above the base number to show the power of 4.

Footnote with sup tag:

<p>This rule is common in law<sup>1</sup></p>

This example places a note marker in text. The number 1 rises above the line to point to a note below.

Chemical formula with sup and sub:

<p>Formula of Sulphur dioxide is SO<sub>2</sub></p>
<p>Formula of Water is H<sub>2</sub>O and heavy water is D<sub>2</sub>O</p>
<p>Math power x<sup>3</sup> shows cube of x</p>

This shows you how to use <sup> and <sub> in one part. You can use these tags for chemical formulas like H2O and math power like x3.

CSS style on sup:

<p>Volume is 10cm<sup>3</sup></p>
<style>
sup {
  font-size: 14px;
  color: blue;
}
</style>

Here you can see the cube marker above 10cm in blue. This shows how CSS rules can change the style while the sup stays above the line.

Wrapping Up

You learned what the <sup> tag means and how it works. Here is a quick recap:

• The <sup> tag shows text above the line.
• You can use CSS to style it.
• It can be used in math and formulas.

FAQs

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

<p>H<sub>2</sub>O and X<sup>3</sup></p>

<style>
sup {
  color: red;
  font-size: 14px;
}
</style>
<p>Price is $10<sup>99</sup></p>

Similar Reads