Add Subscript Tag to Your Webpage
Working with Text
In this lesson, we will learn how to use the subscript tag in HTML.
What is Subscript Tag in HTML
The subscript tag in HTML is used to display text as subscripted characters. It is a formatting tag that is used to reduce the size of text and position it below the baseline of the surrounding text. The subscript tag is represented by the <sub> tag, and it can be used to display mathematical formulas, chemical formulas, footnotes, and other types of text.
The syntax for the subscript tag is straightforward. It requires an opening and closing subscript tag, and the text that needs to be displayed as subscripted characters is placed between these two tags.
Here's an example of how to use <sub> tag in HTML:
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Subscript Tag Example</title>
</head>
<body>
<p>The chemical formula of water is H<sub>2</sub>O.</p>
<p>The chemical formula of glucose is C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>.</p>
</body>
</html>Attributes of Subscript Tag
Here are the attributes we can use with the subscript tag:
- id
- class
- style
- title
id
The id attribute is used to assign a unique name to an element on a web page. We can assign an id to the subscript tag and use it to apply a specific style to that particular tag.
Example
<p>H<sub id="stext">2</sub>O</p>In the above example, we assign an id attribute to the sub tag with a value stext. In CSS and JavaScript, we can use the name stext to access the specific sub tag whose id value is set to the name stext.
Note: The id attribute can be used on any tag to assign a unique tag name. It must be unique for each tag, meaning we can't use the same id name for another tag in an HTML document.
class
The class attribute is used to define a group of elements and to apply a specific style to that group. We can define a class for the subscript tags and use it to apply a specific style to all the subscript tags that belong to a particular class.
Example
<p>O<sub class="info">2</sub></p>
<p>H<sub class="info">2</sub>SO<sub class="info">4</sub></p>In the above example, all sub tags have the same class name, info. If any CSS style is applied to the class name info, it will be applied on all sub tags.
Note: The class attribute can be used on any tag to assign a group name to the tag.
style
The style attribute can be used to apply inline css styles to the subscript tag. We will learn how to apply inline css style using the style attribute later in our CSS tutorial.
Example
<p>H<sub style="color: red">2</sub>O</p>The style="color: red" will change the font color of the subscript tag to red.
title
The title attribute can be used to add a tooltip or additional information to the subscript tag, which will only appear when the user places the mouse cursor on the subscript text.
Example
<p>H<sub title="2 hydrogen atoms">2</sub>O</p>