Do you think IIT Guwahati certified course can help you in your career?
Introduction
In HTML, subscript is a useful feature that allows you to display text below the normal line of text. This is commonly used in mathematical equations, chemical formulas, or other scientific notations.
In this article, we will discuss how to use the <sub> tag to create subscript text in HTML, understand its functions, and see examples of how it's applied in web pages.
Subscript
Subscript is used in HTML to position text lower than the normal line of text. It is primarily used for mathematical expressions, scientific formulas, or other notations where the text needs to be smaller and aligned below the standard text line.
To create subscript text in HTML, you simply use the <sub> tag. This tag is paired with the content that you want to display as a subscript.
Example of Subscript
In a chemical formula, such as H₂O, the "2" should be in subscript. Here’s how you can use the <sub> tag in HTML to achieve this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Subscript Example</title>
</head>
<body>
<p>The chemical formula for water is H<sub>2</sub>O.</p>
</body>
</html>
Output
In this code, the <sub> tag surrounds the number "2", which appears below the normal text line when displayed in a browser. The result is that the text "Hâ‚‚O" will display with the "2" as a subscript, which is the standard notation for the chemical formula of water.
Explanation:
The <sub> tag tells the browser to format the text it surrounds as subscript, making it smaller and positioned slightly below the baseline of the regular text.
The example above shows how this works in a real-world context, like a chemical formula (Hâ‚‚O), which is displayed properly with the subscript.
Example
Let’s take another example where we need to display a mathematical equation with subscripts. For example, the formula for acceleration in physics can be written as:
Acceleration (a) = Δv / Δt
In this example, the "Δ" symbol and the "t" will be in subscript. Here's how we can implement it in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Subscript Example - Physics Formula</title>
</head>
<body>
<p>The formula for acceleration is: a = Δv / Δ<sub>t</sub></p>
</body>
</html>
Output
Explanation:
In this case, the "t" in "Δt" is formatted as a subscript using the <sub> tag.
This is a simple mathematical formula where "t" is a variable that needs to be displayed in subscript format.
When you run this code, the formula will display correctly in a web browser, showing "Δt" with the "t" lowered as a subscript.
Attributes
The `<sub>` tag in HTML is a simple yet powerful element used to define subscript text. Unlike many other HTML tags, the `<sub>` tag does not have any specific attributes of its own. It relies on global attributes that are common to all HTML elements. These global attributes include `class`, `id`, `style`, `title`, & more. Lets understand these:
1. `class`: This attribute is used to assign one or more class names to the `<sub>` element. It is helpful for applying CSS styles or targeting the element with JavaScript.
<p>This is a <sub class="chemical">H<sub>2</sub>O</sub> example.</p>
2. `id`: The `id` attribute provides a unique identifier for the `<sub>` element. It is useful for linking or scripting purposes.
<p>Water is represented as <sub id="water-formula">H<sub>2</sub>O</sub>.</p>
3. `style`: This attribute allows you to apply inline CSS styles directly to the `<sub>` element. For example, you can change the font size or color of the subscript text.
<p>This is <sub style="color: red; font-size: 12px;">subscript</sub> text.</p>
4. `title`: The `title` attribute provides additional information about the `<sub>` element. When you hover over the element, the text inside the `title` attribute will appear as a tooltip.
<p>This is <sub title="This is subscript text">subscript</sub> text.</p>
While the `<sub>` tag itself is straightforward, combining it with these global attributes can enhance its functionality & appearance in your web projects.
How to Use `<sub>` Tag in HTML?
Using the `<sub>` tag in HTML is simple & straightforward. It is an inline element, meaning it can be used within other HTML elements like `<p>`, `<div>`, or `<span>` without disrupting the flow of the content. The `<sub>` tag is primarily used to display text that should appear slightly below the normal line of text, such as in mathematical formulas, chemical compounds, or footnotes.
Let how you can use the `<sub>` tag:
1. Basic Usage: Wrap the text you want to display as subscript inside the `<sub>` tag.
<p>The chemical formula for water is H<sub>2</sub>O.</p>
In this example, the number "2" will appear slightly below the "H" & "O" characters.
2. Nested Usage: You can also nest the `<sub>` tag within other HTML elements like `<strong>`, `<em>`, or even another `<sub>` tag for more complex formatting.
<p>The molecular formula for glucose is C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>.</p>
Here, the numbers "6", "12", & "6" are all displayed as subscript.
3. Combining with CSS: You can use CSS to style the subscript text further. For example, you can change its color, font size, or alignment.
<p>This is <sub style="color: blue; font-size: 14px;">subscript</sub> text with custom styling.</p>
4. Using with Other Tags: The `<sub>` tag can be combined with other HTML tags like `<a>` for links or `<span>` for additional styling.
<p>Visit our <a href="#">website<sub>new</sub></a> for updates.</p>
Let’s take a complete example to show the use of the `<sub>` tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Subscript Example</title>
<style>
sub {
color: green;
font-size: 12px;
}
</style>
</head>
<body>
<p>The chemical formula for sulfuric acid is H<sub>2</sub>SO<sub>4</sub>.</p>
<p>This is an example of <sub>subscript</sub> text with custom CSS.</p>
</body>
</html>
Output
In this example, the `<sub>` tag is used to display chemical formulas & subscript text, & CSS is applied to style the subscript text.
Supported Browsers
The <sub> tag is widely supported across all modern browsers, including:
Google Chrome
Mozilla Firefox
Safari
Microsoft Edge
Opera
This ensures that the subscript text will render correctly regardless of which browser your audience is using.
Even though the <sub> tag is supported by almost all browsers, it is always a good practice to check for compatibility when working on complex projects that require precise formatting.
Frequently Asked Questions
What is the purpose of the <sub> tag in HTML?
The <sub> tag in HTML is used to display text in subscript format, meaning the text is smaller and positioned below the normal text line. This is commonly used in scientific formulas, chemical equations, and mathematical notations.
Can I use multiple subscript tags within the same text?
Yes, you can use multiple <sub> tags within the same text. Each subscript element will apply only to the specific content wrapped inside the <sub> tags.
Are there any browser compatibility issues with the <sub> tag?
No, the <sub> tag is widely supported in all modern browsers such as Google Chrome, Firefox, Safari, Microsoft Edge, and Opera. You should not face any compatibility issues when using it on most platforms.
Conclusion
In this article, we discussed how to use the HTML <sub> tag to create subscript text. We discussed how this feature is used in scenarios like mathematical equations and chemical formulas. You learned how to apply the <sub> tag to display subscript text in a webpage and saw examples that make it easy to implement in your own projects.
519+ registered 
