Tutorialspoint.dev

HTML | Subscript and Superscript Tags

Subscript : For adding a subscript text in a html file, tag can 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 H2O.
Superscript : For adding a superscript text in a html file, tag can 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:

  1. Super and Sub script in HTML code :
    <!DOCTYPE html>
    <html>
    <body>
      
    <p>Testing <sub>subscript text</sub></p>
    <p>Testing <sup>superscript text</sup></p
    </body>
    </html>

  2. 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>

  3. 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>

  4. 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>

  5. 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.



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter