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:
- 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
>
- 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
>
- 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
>
- 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
>
- 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.
leave a comment
0 Comments