Create superscripted text in HTML


Superscript

The Superscript is used to write the text above the character by using the <sup> tag in HTML document. The <sup> tag is nothing but superscript text. It appears half a character above the normal sentence line and appears as small font. Mostly these superscript text uses for footnotes.

The HTML sup tag represent the text in a smaller font and appear half a character. Superscript consists of open and closing tags, the tags supports global and event attributes.

  • They can support for wide variety of browsers

  • The <sup> tag used to represent mathematical formulas

  • It can also display ordinal numbers

  • It is compatible with wide range of browser technologies.

It can be styled with Cascading Style Sheets (CSS), and we can make the text larger or smaller.

Syntax

The usage of superscript tag is −

<sup>superscript text</sup>
  • Global Attributes − This tag supports all the global attributes described in − HTML Attribute Reference.

  • Event Attributes − This tag supports all the event attributes described in − HTML Events Reference.

Example

Let us consider example, performing mathematical calculation representation using HTML -

<!DOCTYPE html>
<html>
<head>
   <title>HTML sup Tag</title>
</head>
<body> Value of 5 <sup>2</sup> + 3 <sup>3</sup> = 52 </body>
</html>

Example

Following is another example, to add a superscripted text in HTML −

<!DOCTYPE html>
<html>
<head>
   <style>
      sup {
         vertical-align: sup;
         font-size: medium;
      }
   </style>
</head>
<body>
   <p>Formula</p>
   <p> Representation Einstein:</p>
   <p>Einstein equation is: <var>E</var>= <var>m</var>
      <var>c</var>
      <sup>2</sup>.
   </p>
</body>
</html>

Subscript

The subscript is used to write the text below the character by using the <sub> tag in HTML document. The <sub> tag is nothing but subscript text.

It appears half a character below the normal sentence line and appears as small font. Mostly these subscript text uses for chemical formulas, like O2 to be written as O2.

Syntax

The usage of subscript tag is −

<sub>subscript text</sub>

Example

<!DOCTYPE html>
<html>
<body>
   <p>CO <sub>2</sub></p>
</body>
</html>  

Consider some more examples to know about the text subscript, superscript, headings, underlines etc.

Example

Following example is representing the text in different formats −

<HTML>
   <TITLE>Welcome to TutorialsPoint</TITLE>
   <BODY>
      <H1>1. EXAMPLE OF H1 TAG.. THIS IS THE BIGGEST HEADING. </H1>
      <H2>2. EXAMPLE OF H2 TAG.. THIS IS THE SECOND BIGGEST HEADING.</H2>
      <H3>3. EXAMPLE OF H3 TAG.. THIS IS THE THIRD BIGGEST HEADING.</H3>
      <H4>4. EXAMPLE OF H4 TAG.. THIS IS THE FOURTH BIGGEST HEADING.</H4>
      <H5>5. EXAMPLE OF H5 TAG.. THIS IS THE FIFTH BIGGEST HEADING.</H5>
      <H6>6. EXAMPLE OF H6 TAG.. THIS IS THE SIXTH BIGGEST HEADING.</H6>
      <hr>
      <P>
         <B>BOLD: This is BOLD text.</B>
      </P>
      <P>
         <I>ITALIC: This is ITALIC text.</I>
      </P>
      <P>
         <SMALL></SMALL>SMALL: This is SMALL text. </SMALL>
      </P>
      <P>SUPERSCRIPT: This is <SUP>SUPERSCRIPT</SUP>. For example: 2 <SUP>4</SUP>=16 </P>
      <P>SUBSCRIPT: This is <SUB>SUBSCRIPT</SUB>. For example: log <SUB>2</SUB>16=4 </P>
      <P>
         <U>ITALIC: This is UNDERLINED text.</U>
      </P>
   </BODY>
</HTML>

Updated on: 10-Oct-2023

153 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements