Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Display the Chemistry Formula in the HTML Input?
In HTML, for displaying the chemistry formula in the HTML input, we are going to use the subscript and superscript tags. Let’s consider a simple example.
Chemical formula of water is H2O
For the above, we are going to apply the HTML superscript and subscript tags to get the output of the chemical formula as mentioned above.
Chemical formula of water is H<sub>2</sub>O
Let’s dive into the following article for getting the better understanding on displaying the chemistry formula in the HTML input.
HTML Subscript
Inline text that should be displayed as subscript purely for typographical reasons is specified by the HTML element <sub> tag. Subscripts are often displayed with smaller font and a lowered baseline.
HTML Superscript
Inline text that should be rendered as superscript purely for typographical reasons is specified by the HTML element <sup> tag. Superscripts are often presented with smaller font and a raised baseline.
For getting more idea on displaying the chemistry formula in the HTML input. Let’s look into the following examples
Example
In the following example, we are using the subscript for writing the chemical formula of sulfuric acid.
<!DOCTYPE html>
<html>
<body>
<style>
body{
text-align: center;
background-color:#EAFAF1;
}
p{
color: #8E44AD ;
}
</style>
<p>Chemical Formula of Sulphuric Acid: H<sub>2</sub>SO<sub>4</sub></p>
</body>
</html>
When the script gets executed, it will generate an output consisting of the chemical formula for sulfuric acid displayed on the webpage obtained by using the script.
Example
Considering the following example, where we are using the superscript to write the chemical formula for Tin ion (Sn2+).
<!DOCTYPE html>
<html>
<body style="background-color:#D5DBDB ">
<style>
.tutorial {
position: absolute
}
.place {
position:relative; left: 40px;
}
</style>
<span class='tutorial'>
<span class='place'><b>Sn</b><sup>2+</sup>
</span>
</span>
</body>
</html>
On running the above script, the output window will pop up, displaying the chemical formula of the tin ion on the webpage obtained by using the superscript tag.
Example
Let’s consider the following example, where we are using the superscript and subscript for writing the chemical formula of the inner orbital complex.
<!DOCTYPE html>
<html>
<body style="background-color:#F4ECF7 ">
<p>
<strong>Example of the inner orbital complex:
[Co(NH<sub>3</sub>)<sub>6</sub>]<sup>3+ </sup></strong>
</p>
</body>
</html>
When the script gets executed, it will generate an output consisting of an example of the inner orbital complex displayed on the webpage, obtained by using the superscript and subscript.
909 Views
