Introduction to SUP Tag in HTML


Introduction to SUP Tag in HTML

SUP Tag in HTML is used to add superscript text in the HTML document. SUP is an abbreviation of superscript text. It’s mostly used in HML languages for mathematical expression as well as for scientific formulas. The placement of the SUP tag is in the half position of its character’s height upon baseline. It is going to be used for typographical purposes only. Another use of this tag is to show footnotes.

The text enclosed in between <sup>.. </sup> shows superscript text in smaller font size in inline text format. Most of the time, it is used to show Exponents, power of numbers in the text representation.<sup> tag doesn’t have any special attributes, but it supports global attribute as well as event attributes.


SUP tag in HTML is going to be used as follows:

<sup> text </sup>

  • As shown in the above syntax, the text in between <sup> tag is considered a superscript for the text. It is used in mathematical formulas and in some scientific equations.
  • Example: <p>5<sup>2</sup> = 25</p>
  • HTML sup tag supports global attributes like accesskey, class, data-*,dir, conenteditable, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title, translate etc.
  • It also supports event attributes like onafterprint, onbeforeprint, onerror, onbeforeunload, onhashchange, onload, onmessage, ononline, onoffline, onpagehide, onpopstate, onpageshow, onpagehide, onresize, onunload, onstorage and many more.

Examples of SUP Tag in HTML

Sup tag is also used to display as a wordmark with style for a business or product purposeIt can be done using CSS, too; we are not using the sup tag in this. An example of this is as follows:

Example #1

Let’s see how mathematical equations can be written using the <SUP> tag. An example includes various mathematical formula as shown below:


<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
* {
box-sizing: border-box;
.column {
float: left;
width: 40%;
<div class="row">
<h2>Mathematical Equations</h2>
<div class="column">
<h4>Mathematical formulas</h4>
<p> <b> Area of Square :</b> A = l <sup> 2 </sup></p>
<p> <b> Area of Circle :</b> A = 3.14 * r <sup> 2 </sup></p>
<p> <b> Area of Sphere :</b> A = 4 * 3.14* 4 <sup> 2 </sup></p>
<p> <b> Area of Cube :</b> V = s <sup> 3 </sup></p>
<p> <b> Area of Cylinder :</b> V = 3.14 * r <sup>2</sup></p>
<p> <b> Product :</b> A <sup> m </sup> * A <sup> n </sup> = a <sup>m + n</sup></p>
<p> <b> Quotient :</b> A <sup> m </sup> / A <sup> n </sup> = a <sup>m - n</sup></p>
<p> <b> Power of Power :</b> (a*b) <sup> n </sup> = a <sup> n </sup>  * b <sup> n </sup>
<p> <b> Power of Power :</b> (a/b) <sup> n </sup> = a <sup> n </sup> / b <sup>n</sup></p>
<p> <b> Zero Exponents :</b> a <sup> 0 </sup> = 1</p> <br>
<div class="column" >
<h4> Factoring formulas </h4>
<p> <b> a<sup>2</sup> - b <sup>2</sup> = (a - b) * ( a + b ) </b> </p>
<p> <b> a<sup>4</sup> - b <sup>4</sup> = (a - b) * ( a + b ) * (a <sup>2</sup> + b <sup>2</sup> ) </b> </p>
<p> <b> a<sup>6</sup> - b <sup>6</sup> = (a - b) * ( a + b ) * (a <sup>2</sup> -ab + b <sup>2</sup> ) * (a <sup>2</sup> +ab + b <sup>2</sup> ) </b> </p>
<p> <b> a<sup>3</sup> + b <sup>3</sup> = (a + b) * (a <sup>2</sup> -ab + b <sup>2</sup> ) </b> </p>
<p> <b> a<sup>3</sup> - b <sup>3</sup> = (a - b) * (a <sup>2</sup> +ab + b <sup>2</sup> )  </b> </p>
<p> <b>(a+b) <sup>2</sup> = a <sup>2</sup> + 2ab + b <sup>2</sup> </b> </p>
<p> <b> (a-b) <sup>2</sup> = a <sup>2</sup> -2ab + b <sup>2</sup> </b> </p>
<p> <b> (a+b+c) <sup>2</sup> = a <sup>2</sup> + b <sup>2</sup>  + c <sup>2</sup> + 2(ab + bc + ca) </b> </p>
<p> <b> (a+b) <sup>3</sup> = a <sup>3</sup> + b <sup>3</sup> + 3ab(a+b) </b> </p>
<p> <b> (a-b) <sup>3</sup> = a <sup>3</sup> - b <sup>3</sup> - 3ab(a-b) </b>  </p>
 Popular Course in this categoryHTML Training (12 Courses, 19+ Projects, 4 Quizzes)12 Online Courses | 19 Hands-on Projects | 89+ Hours | Verifiable Certificate of Completion | Lifetime Access | | 4 Quizzes with Solutions
4.5 (6,502 ratings)Course Price
₹6999 ₹41999
View Course

Related CoursesBootstrap Training (2 Courses, 6+ Projects)XML Training (5 Courses, 6+ Projects)CSS Training (9 Courses, 9+ Projects)


SUP Tag in HTML-1.1

Example #2

Showing squares and cubes of the numbers in <SUP> tag.


<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<h2>Squares and Cube of Numbers</h2>
<h4>Numbers & its Square</h4>
<p> <b> 1<sup> 2 </sup> = 1</b> </p>
<p> <b> 2<sup> 2 </sup> = 4</b> </p>
<p> <b> 3<sup> 2 </sup> = 9</b> </p>
<p> <b> 4<sup> 2 </sup> = 16</b> </p>
<p> <b> 5<sup> 2 </sup> = 25</b> </p>
<h4>Numbers & its Cube</h4>
<p> <b> 1<sup> 3 </sup> = 1</b> </p>
<p> <b> 2<sup> 3 </sup> = 8</b> </p>
<p> <b> 3<sup> 3 </sup> = 27</b> </p>
<p> <b> 4<sup> 3 </sup> = 64</b> </p>
<p> <b> 5<sup> 3 </sup> = 125</b> </p>


SUP Tag in HTML-1.2

Example #3

<SUP> tag is used to represent physical equations, as shown below.


<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<h2>Physics Equations</h2>
<p><b>Kinetic Energy formula E = 1/2 mv <sup> 2 </sup></b> </p>
<p><b>Kinetic Elastic Energy formula E = 1/2 ke  <sup> 2 </sup></b> </p>
<p> <b> Enery of object: E= MC<sup> 2 </sup> </b> </p>
<p><b>Power Current resistance formula = I<sup> 2 </sup> R</b> </p>
<p><b> Formula for calculating velocity , distance and acceleration : v<sup> 2 </sup> - u <sub>2 </sub> =2as</b> </p>


physics equation


Here we came to know that the <SUP> tag in HTML code is used to represent superscription text in its related HTML document. This tag is mainly used in mathematical expression, scientific equation and for showing language abbreviations. It shows text in half of the below normal line, and it is in the smaller text size.

Recommended Articles

This is a guide to SUP Tag in HTML. Here we discuss what is SUP Tag in HTML along with different examples and code implementation. You may also look at the following articles to learn more –

  1. Embed Tag in HTML
  2. Canvas Tag in HTML
  3. HTML figure Tag
  4. Frame Tag in HTML

Leave a Comment

Your email address will not be published. Required fields are marked *