Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Display the Chemistry Formula in the HTML Input?
In HTML, displaying chemistry formulas requires the use of subscript and superscript tags to properly represent chemical notation. The <sub> tag displays text below the baseline for elements like H2O, while the <sup> tag displays text above the baseline for charges like Ca2+.
Syntax
Following is the syntax for subscript text
<sub>subscript text</sub>
Following is the syntax for superscript text
<sup>superscript text</sup>
HTML Subscript
The HTML <sub> element specifies inline text that should be displayed as subscript for typographical reasons. Subscripts appear with a smaller font size and lowered baseline, making them perfect for chemical formulas like H2O or molecular structures.
HTML Superscript
The HTML <sup> element specifies inline text that should be displayed as superscript for typographical reasons. Superscripts appear with a smaller font size and raised baseline, ideal for representing ionic charges like Na+ or mathematical exponents.
Examples
Basic Chemical Formula with Subscript
Following example demonstrates using subscript to display the chemical formula of sulfuric acid
<!DOCTYPE html>
<html>
<head>
<title>Chemical Formula - Subscript</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; background-color: #f0f8ff; padding: 20px;">
<h2>Chemical Formula Examples</h2>
<p style="color: #8E44AD; font-size: 18px;">
Chemical Formula of Sulfuric Acid: H<sub>2</sub>SO<sub>4</sub>
</p>
<p style="color: #2E7D32; font-size: 18px;">
Chemical Formula of Water: H<sub>2</sub>O
</p>
</body>
</html>
The output displays the chemical formulas with properly formatted subscripts
Chemical Formula Examples Chemical Formula of Sulfuric Acid: H?SO? Chemical Formula of Water: H?O
Ionic Charges with Superscript
Following example shows how to represent ionic charges using superscript
<!DOCTYPE html>
<html>
<head>
<title>Ionic Charges - Superscript</title>
</head>
<body style="font-family: Arial, sans-serif; background-color: #f5f5f5; padding: 20px;">
<h2>Common Ionic Charges</h2>
<div style="font-size: 20px; line-height: 1.8;">
<p><strong>Tin Ion:</strong> Sn<sup>2+</sup></p>
<p><strong>Calcium Ion:</strong> Ca<sup>2+</sup></p>
<p><strong>Chloride Ion:</strong> Cl<sup>-</sup></p>
<p><strong>Aluminum Ion:</strong> Al<sup>3+</sup></p>
</div>
</body>
</html>
The output shows various ionic charges with superscript notation
Common Ionic Charges Tin Ion: Sn²? Calcium Ion: Ca²? Chloride Ion: Cl? Aluminum Ion: Al³?
Complex Chemical Formulas
Following example demonstrates combining both subscript and superscript for complex chemical notation
<!DOCTYPE html>
<html>
<head>
<title>Complex Chemical Formulas</title>
</head>
<body style="font-family: Arial, sans-serif; background-color: #fafafa; padding: 20px;">
<h2>Complex Chemical Formulas</h2>
<div style="font-size: 18px; line-height: 2;">
<p><strong>Inner Orbital Complex:</strong>
[Co(NH<sub>3</sub>)<sub>6</sub>]<sup>3+</sup>
</p>
<p><strong>Permanganate Ion:</strong>
MnO<sub>4</sub><sup>-</sup>
</p>
<p><strong>Ammonium Sulfate:</strong>
(NH<sub>4</sub>)<sub>2</sub>SO<sub>4</sub>
</p>
<p><strong>Carbonic Acid:</strong>
H<sub>2</sub>CO<sub>3</sub>
</p>
</div>
</body>
</html>
The output displays complex chemical formulas with proper subscript and superscript formatting
Complex Chemical Formulas Inner Orbital Complex: [Co(NH?)?]³? Permanganate Ion: MnO?? Ammonium Sulfate: (NH?)?SO? Carbonic Acid: H?CO?
Interactive Chemistry Formula Input
Following example demonstrates how to create an interactive form where users can input chemical formulas using subscript and superscript
<!DOCTYPE html>
<html>
<head>
<title>Interactive Chemistry Formula</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; background-color: #f9f9f9;">
<h2>Chemistry Formula Builder</h2>
<div style="margin: 20px 0;">
<button onclick="addSubscript()">Add Subscript</button>
<button onclick="addSuperscript()">Add Superscript</button>
<button onclick="clearFormula()">Clear</button>
</div>
<div id="formula" style="font-size: 24px; padding: 15px; border: 2px solid #ccc; background: white; min-height: 40px;">
Click buttons to build your formula
</div>
<script>
let formulaDiv = document.getElementById('formula');
function addSubscript() {
let text = prompt('Enter subscript text:');
if (text) {
formulaDiv.innerHTML += '<sub>' + text + '</sub>';
}
}
function addSuperscript() {
let text = prompt('Enter superscript text:');
if (text) {
formulaDiv.innerHTML += '<sup>' + text + '</sup>';
}
}
function clearFormula() {
formulaDiv.innerHTML = 'Click buttons to build your formula';
}
</script>
</body>
</html>
This interactive example allows users to build chemical formulas by adding subscript and superscript elements dynamically.
Best Practices
When displaying chemical formulas in HTML, follow these best practices
-
Semantic meaning Use
<sub>and<sup>for their semantic meaning, not just visual appearance. -
Font consistency Ensure the base text and sub/superscript text use the same font family for consistency.
-
Accessibility Screen readers will announce subscript and superscript text appropriately when using proper HTML tags.
-
Spacing Be mindful of spacing around chemical formulas to maintain readability.
Common Chemical Formula Patterns
| Type | HTML Code | Display | Use Case |
|---|---|---|---|
| Simple Compound | <code>H<sub>2</sub>O</code> | H2O | Water molecule |
| Ionic Charge | <code>Na<sup>+</sup></code> | Na+ | Sodium ion |
| Complex Ion | <code>SO<sub>4</sub><sup>2-</sup></code> | SO42- | Sulfate ion |
| Parentheses | <code>(NH<sub>4</sub>)<sub>2</sub></code> | (NH4)2 | Multiple groups |
Conclusion
HTML's <sub>
2K+ Views
