HTML | Subscript and Superscript Tags

17 Mar, 2022
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.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.Examples:  
Super and Sub script in HTML code:  
Super and Sub script in HTML code:  
html
<!DOCTYPE html><html>  <body>      <p>Testing <sub>subscript text</sub></p>        <p>Testing <sup>superscript text</sup></p>  </body>  </html>                    
Output:  
Output:  
 Set style of subscript with CSS:  
 
Set style of subscript with CSS:  
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:  
Output:  
 Another example with CSS:  
 
Another example with CSS:  
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:  
Output:  
Superscript Example With CSS:  
Superscript Example With CSS:  
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:  
Output:  
 Example to write mathematical equations using super and subscripts:  
 
Example to write mathematical equations using super and subscripts:  
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:  
Output:  
Supported Browser: Supported browsers are listed below.  
Google Chrome
Internet Explorer
Firefox
Opera
Safari
This article is contributed by Shubrodeep Banerjee. If you like GeeksforGeeks and would like to contribute, you can also write an article using write.geeksforgeeks.org or mail your article to review-team@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above. 
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
Sahil_Chhabra
HTML and XML
HTML-Tags
HTML
Technical Scripter
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
CSS to put icon inside an input element in a form
Types of CSS (Cascading Style Sheet)
Design a Tribute Page using HTML & CSS