HTML | Subscript and Superscript Tags

Subscript : For adding a subscript text in a html file, _tagcan be used. The sub tag defines 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 H₂O.
Superscript : For adding a superscript text in a html file, ^tagcan be used. The sup tag defines 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.

Examples:

Super and Sub script in HTML code :

<!DOCTYPE html>

<html>

<body>

Testing subscript text

Testing superscript text</p

</body>

</html>

Example With CSS :

<!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> 

Another Example with CSS :

<!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> 

Superscript Example With CSS:

<!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> 

Example to write mathematical equations using super and sub scripts:

<!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> 

Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above.

HTML | Subscript and Superscript Tags

tags:

leave a comment

0 Comments

Subscribe to Our Newsletter

Top Followed books