Open In App
Related Articles

HTML Subscript and Superscript Tags

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

In HTML, the <sub> tag is used for subscript, making text appear slightly below the normal line, while the <sup> tag is used for superscript, positioning text slightly above the normal line. These tags are employed to format text in a way that is either lower or higher than the regular text line, useful for applications such as chemical formulas or mathematical expressions.

gh-660x321


Table of Content

Subscript

The <sub> tag is used to add a subscript text to the HTML document. The <sub> tag defines the subscript text. Subscript text appears half a character below the normal line and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O to be written as H2O.

Example: The implementation of sub script tag with an example.

html

<!DOCTYPE html>
<html>
   
<head>
    <style>
        sub {
            vertical-align: sub;
            font-size: small;
        }
    </style>
</head>
 
<body>
    <p>
        A sub element is displayed like this
    </p>
 
    <p>This text contains
        <sub>subscript text</sub>
    </p>
    <p>
        Change the default CSS settings to see the effect.
    </p>
</body>
   
</html>

                    

Output: 

Example: The implementation of sub script tag in mathmetical form.

html

<!DOCTYPE html>
<html>
 
<head>
    <style>
        sub {
            vertical-align: sub;
            font-size: medium;
        }
    </style>
</head>
 
<body>
    <p>Examples to demonstrate subscript text</p>
 
    <p> Chemical formula of water is H<sub>2</sub>O</p>
 
    <p>T<sub>i+2</sub>= T<sub>i</sub> + T<sub>i+1</sub></p>
 
    <p>Change the default CSS settings to see the effect.</p>
 
</body>
 
</html>

                    

Output: 

Superscript:

The <sup> tag is used to add a superscript text to the HTML document. The <sup> tag defines the superscript text. Superscript text appears half a character above the normal line and is sometimes rendered in a smaller font. Superscript text can be used for footnotes.

Example: The implementation of super script tag with an example. 

html

<!DOCTYPE html>
<html>
 
<head>
    <style>
        sup {
            vertical-align: super;
            font-size: small;
        }
    </style>
</head>
 
<body>
    <p>A sup element is displayed like this:</p>
 
    <p>This text contains <sup>superscript text</sup></p>
 
    <p>Change the default CSS settings to see the effect.</p>
 
</body>
   
</html>

                    

Output: 

Example: The implementation of sup script tag in mathmetical form with an example. 

html

<!DOCTYPE html>
<html>
   
<head>
    <style>
        sup {
            vertical-align: super;
            font-size: medium;
        }
    </style>
</head>
 
<body>
    <p>Examples to demonstrate superscript text</p>
 
    <p>2 <sup>4</sup>=16</p>
 
    <p>X <sup>4</sup>+ Y<sup>6</sup></p>
 
    <p>9<sup>th</sup> of september</p>
 
    <p>Change the default CSS settings to see the effect.</p>
 
</body>
   
</html>

                    

Output: 

Example: The implementation of sup and sub script tag

HTML

<!DOCTYPE html>
<html>
   
<body>
    <p>Testing
        <sub>subscript text</sub>
    </p>
    <p>Testing
        <sup>superscript text</sup>
    </p>
 
</body>
   
</html>

                    

Output:

Supported Browser:

  • Google Chrome 1
  • Microsoft Edge 12
  • Firefox 1
  • Opera 15
  • Safari 4


Last Updated : 12 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads