HTML | Subscript and Superscript Tags

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:

  1. Super and Sub script in HTML code:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

  2. Set style of subscript with CSS:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

  3. Another example with CSS:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

  4. Superscript Example With CSS:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

  5. Example to write mathematical equations using super and sub scripts:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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 contribute.geeksforgeeks.org or mail your article to contribute@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.



My Personal Notes arrow_drop_up