SUP Tag in HTML-HTML Tutorial-php.cn

Table of Contents

Examples of SUP Tag in HTML

Example #3

Conclusion

Home

Web Front-end

HTML Tutorial

SUP Tag in HTML

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:26 PM

html html5 HTML Tutorial HTML Properties HTML tags

SUP Tag in HTML adds superscript text to the HTML document. SUP is an abbreviation of superscript text. It finds primary usage in HTML languages for representing mathematical expressions and scientific formulas. The placement of the SUP tag is in the half position of its character’s height upon baseline. It serves exclusively for typographical purposes. Another use of this tag is to show footnotes.

The text enclosed between ^.. shows superscript text in smaller font sizes in inline text format. It is a common practice to utilize it for displaying exponents, indicating the power of numbers in the text representation.^{tag doesn’t have any special attributes, but it supports global and event attributes.}

Syntax:

To use the sup tag in HTML, follow the syntax below:

<sup> text </sup>

Copy after login

As shown in the above syntax, the text in between the ^{tag is considered a superscript for the text. People use it in mathematical formulas and specific scientific equations.}
Example:
5² = 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

You can also use the sup tag to display a stylish wordmark for business or product purposes. 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 formulas, 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>
<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>
<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>
</div>
</div>
</body>
</html>

Copy after login

Output:

SUP Tag in HTML

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>
<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>
</body>
</html>

Copy after login

Output:

SUP Tag in HTML

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>
<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>
</body>
</html>

Copy after login

Output:

SUP Tag in HTML

Conclusion

Here we learned that the ^{tag in HTML code represents superscription text in its related HTML document. Users primarily utilize this tag for mathematical expressions, scientific equations, and displaying language abbreviations. It offers text in half of the below-normal line and is in a smaller text size.}

The above is the detailed content of SUP Tag in HTML. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn