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 .. 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. tag doesn’t have any special attributes, but it supports global attribute as well as event attributes.

Syntax:

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

 text 

As shown in the above syntax, the text in between tag is considered a superscript for the text. It is used in mathematical formulas and in some scientific equations.
Example: 52 = 25
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 purpose. It 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 tag. An example includes various mathematical formula as shown below:

Code:

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } .column { float: left; width: 40%; } </style> </head> <body> <div class="row"> <h2>Mathematical Equations</h2> <div class="column"> <h4>Mathematical formulas</h4> Area of Square : A = l 2 Area of Circle : A = 3.14 * r 2 Area of Sphere : A = 4 * 3.14* 4 2 Area of Cube : V = s 3 Area of Cylinder : V = 3.14 * r 2 Product : A m * A n = a m + n Quotient : A m / A n = a m - n Power of Power : (a*b) n = a n * b n Power of Power : (a/b) n = a n / b n Zero Exponents : a 0 = 1 </div> <div class="column" > <h4> Factoring formulas </h4> a2 - b 2 = (a - b) * ( a + b ) a4 - b 4 = (a - b) * ( a + b ) * (a 2 + b 2 ) a6 - b 6 = (a - b) * ( a + b ) * (a 2 -ab + b 2 ) * (a 2 +ab + b 2 ) a3 + b 3 = (a + b) * (a 2 -ab + b 2 ) a3 - b 3 = (a - b) * (a 2 +ab + b 2 ) (a+b) 2 = a 2 + 2ab + b 2 (a-b) 2 = a 2 -2ab + b 2 (a+b+c) 2 = a 2 + b 2 + c 2 + 2(ab + bc + ca) (a+b) 3 = a 3 + b 3 + 3ab(a+b) (a-b) 3 = a 3 - b 3 - 3ab(a-b) </div> </div> </body> </html> 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

Output:

Example #2

Showing squares and cubes of the numbers in tag.

Code:

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

Output:

Example #3

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

Code:

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

Output:

Conclusion

Here we came to know that the 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.

Introduction to SUP Tag in HTML