HTML Subscript and Superscript Tags
Last Updated :
12 Jan, 2024
In HTML, the <sub> tag is used for subscript, making text appear slightly below the normal line, while the <sup> tag is used for superscript, positioning text slightly above the normal line. These tags are employed to format text in a way that is either lower or higher than the regular text line, useful for applications such as chemical formulas or mathematical expressions.
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.
Example: The implementation of sub script tag with an example.
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:Â
Example: The implementation of sub script tag in mathmetical form.
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:Â
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.
Example: The implementation of super script tag with an example.Â
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:Â
Example: The implementation of sup script tag in mathmetical form with an example.Â
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:Â
Example: The implementation of sup and sub script tag
HTML
<!DOCTYPE html>
< html >
< body >
< p >Testing
< sub >subscript text</ sub >
</ p >
< p >Testing
< sup >superscript text</ sup >
</ p >
</ body >
</ html >
|
Output:
Supported Browser:
- Google Chrome 1
- Microsoft Edge 12
- Firefox 1
- Opera 15
- Safari 4
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...