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>

    /div>

  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

You Might Also Like

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter