HTML Super Script Tag – POFTUT
HTML Super Script Tag

HTML Super Script Tag

by

Super script is an HTML tag used to express a different type of text like Mathematical equation, Exponent, Date Day, Footnote, etc. in an elegant way. Super Script uses <sup> tag for start and </sup> tag for end.

<sup> Super Script Tag Syntax

Super Script <sup> has very simple syntax where the text we want to change is put between super script start and end tags. We can provide some styling inside the super script tag or CSS externally.

OTHER <sup> TEXT </sup> OTHER
  • `OTHER` is the normal HTML were that will not be affected by super script
  • `TEXT` is the text which will be changed with the super script.

When To Use <sup> Super Script Tag?

Super script can be a very useful tag which provides a lot of different uses while expressions different things. Here a list of most used cases about the Super Script.

  • Alignment of specific text in a sentence.
  • Mathematical and Science equation expression.
  • Exponent expression
  • Date Day elegant formatting
<html>
<body>

<p>This text contains <sup>This is super</sup> text.</p>
<p>Poftut <sup>poftut.com</sup> text.</p>
<p>2<sup>3</sup> = 8</p>
<p>4<sup>th</sup> November</p>
<p>"I love poftut.com <sup>1</sup>"</p>

Footnote<br>
1.İsmail Baydan 2019

</body>
</html>
When To Use <sup> Super Script Tag?
When To Use Super Script Tag?

Change <sup> Super Script Style

As a standard HTML tag, we can change the Super Script tag style in different ways. The most simple way is using the style attribute of the super script. We will use the style attribute of the <sup> tag.

<html>
<body>

<p>This text contains <sup style="background-color:yellow">This is super</sup> text.</p>
<p>2<sup style="color:red">3</sup> = 8</p>
<p>4<sup style="background-color:yellow">th</sup> November</p>
<p>"I love poftut.com <sup style="color:red">1</sup>"</p>

Footnote<br>
1.İsmail Baydan 2019

</body>
</html>
Change <sup> Super Script Style
Change Super Script Style

Mathematical Equation Example with <sup> SuperScript

We can use super script in order to express mathematical equations.

<html>
<body>

<p> 2<sup>3</sup> = 8  </p>

<p> f<sup>3</sup>x </p>

<p> x<sup>3</sup>+2x<sup>3</sup> </p>

<p> f<sup>3</sup>(x)</p>


</body>
</html>
Mathematical Equation Example with SuperScript
Mathematical Equation Example with SuperScript

Date Day Example with <sup> SuperScript

We can also express some date and time values with the super script. We will add some postfixes like th , th  etc. like below.

<html>
<body>

<p> 2<sup>nd</sup> Day</p>

<p> 5<sup>th</sup> Week</p>

<p> 7<sup>th</sup> Week</p>

<p> 8<sup>th</sup> Hour</p>

</body>
</html>
Date Day Example with SuperScript
Date Day Example with SuperScript

Footnote Example with <sup> SuperScript

Another use case for super script is in annotations or footnote. This can be very useful to add annotation, reference or footnote about some part of the text.

<html>
<body>

<p>The generall workforce consist of 23% of the white people.<sup>1</sup></p>


FOOTNOTE:
<p>1. The Analisys Of Work Force 2018.</p>

</body>
</html>
Footnote Example with SuperScript
Footnote Example with SuperScript

Leave a Comment