HTML Subscript and Superscript Tags
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.
Table of Content
- Subscript
- Superscript
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
Contact Us