HTML Subscript and Superscript Tags
Last Updated :
27 Aug, 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:
Supported Browser:
HTML Subscript and Superscript Tags – FAQs
What is the difference between the <sub> and <sup> tags?
The <sub> tag is used for subscript text (e.g., H<sub>2</sub>O for water), while the <sup> tag is used for superscript text (e.g., x<sup>2</sup> for squared numbers).\
What are some common use cases for the <sub> and <sup> tags?
Common use cases include:
- Chemical formulas: H<sub>2</sub>O (water)
- Mathematical equations: x<sup>2</sup> (squared)
- Footnotes: Example<sup>1</sup>
- Trademark symbols: Company<sup>®</sup>
Are the <sub> and <sup> tags semantic?
Yes, these tags are semantic and convey specific meaning about the content they enclose, making them more accessible and better understood by search engines and assistive technologies.
Can I nest other HTML tags inside <sub> and <sup> tags?
Yes, you can nest inline elements like <span>, <a>, or <strong> within <sub> and <sup> tags, but it’s important to maintain readability and semantic clarity.
Can the <sub> and <sup> tags be used together?
Yes, you can use both tags together if needed, such as in complex mathematical expressions or annotations:
x<sup>2</sup> + y<sub>1</sub> = z