HTML: <sub> tag
In this series of learning HTML, we will teach you how to use HTML sub tag with proper syntax and lots of examples. Let’s start on the HTML sub tag.
Description of HTML sub tag
The HTML <sub> tag is used to define subscript text in an HTML document. Subscript text is text that appears smaller and below the baseline of the rest of the text. It is often used to represent chemical formulas, mathematical equations, and footnotes.
Here is an example of how the <sub> tag can be used:
<p>The chemical formula for water is H<sub>2</sub>O.</p>In this example, the <sub> tag is used to indicate that the number 2 is subscript text, indicating that there are two hydrogen atoms in the molecule of water.
When the code is rendered in a web browser, it will appear like this:
The chemical formula for water is H₂O.The <sub> tag can also be used to represent mathematical equations and formulas, as well as footnotes and other annotations. For example:
<p>The quadratic formula is x = (-b ± √<span style="text-decoration:overline;">b<sup>2</sup>-4ac</span>)/2a.</p>In this example, the <sub> tag is used to indicate that the numbers 2 and a are subscript text, indicating that they are part of the quadratic formula.
When the code is rendered in a web browser, it will appear like this:
The quadratic formula is x = (-b ± √(b²-4ac))/2a.Overall, the <sub> tag is a useful tool for indicating subscript text in an HTML document, and can be used in a variety of ways to represent chemical formulas, mathematical equations, footnotes, and other annotations.
Syntax of HTML sub tag
The HTML sub tag is used to markup subscripted text in a web page. The syntax of the sub tag is as follows:
<sub>Subscripted text goes here</sub>Here, the sub tag is an inline element that is used to markup text that is to be displayed as a subscript. It can be used within a paragraph, heading, or any other block element.
The sub tag can be used to represent chemical formulas, mathematical formulas, or any other context where text needs to be displayed in a smaller size and lowered position relative to the surrounding text.
Example:
<p>The chemical formula for water is H<sub>2</sub>O.</p>This will create a paragraph with the chemical formula for water, with the “2” subscripted to indicate that there are two hydrogen atoms in the molecule.
Note that the sub tag is not the same as the sup tag, which is used to markup superscripted text.
Global Attributes
HTML sub tag is a part of Global Attributes.
The <sub> tag in HTML is used to create subscripted text. Some of the global attributes that can be used with the <sub> tag include:
class: This attribute allows you to assign a CSS class to the subscripted text for styling purposes.id: This attribute allows you to assign a unique identifier to the subscripted text for scripting purposes.style: This attribute allows you to apply inline CSS styling to the subscripted text.title: This attribute allows you to provide a tooltip or additional information about the subscripted text.accesskey: This attribute allows you to specify a keyboard shortcut for quickly accessing the subscripted text.contenteditable: This attribute allows you to make the subscripted text editable by the user.dir: This attribute specifies the direction of the subscripted text (left-to-right or right-to-left).hidden: This attribute indicates whether the subscripted text should be hidden from view.lang: This attribute specifies the language of the subscripted text.tabindex: This attribute specifies the order in which the subscripted text is included in the tabbing order of the page.
It’s important to note that some of these attributes, such as accesskey and tabindex, are primarily used for accessibility and user interface purposes, while others, such as hidden and lang, are used for semantic and language purposes.
Event Attributes
HTML sub tag is a part of Event Attributes.
The <sub> tag in HTML supports a few event attributes that can be used to trigger JavaScript code when a specific event occurs. These event attributes include:
onblur: This event attribute is triggered when the subscripted text loses focus.onfocus: This event attribute is triggered when the subscripted text gains focus.onkeydown: This event attribute is triggered when a key is pressed down while the subscripted text has focus.onkeypress: This event attribute is triggered when a key is pressed while the subscripted text has focus.onkeyup: This event attribute is triggered when a key is released while the subscripted text has focus.onclick: This event attribute is triggered when the subscripted text is clicked.ondblclick: This event attribute is triggered when the subscripted text is double-clicked.onmousedown: This event attribute is triggered when the mouse button is pressed down while the pointer is over the subscripted text.onmousemove: This event attribute is triggered when the mouse pointer moves while over the subscripted text.onmouseup: This event attribute is triggered when the mouse button is released while the pointer is over the subscripted text.
These event attributes can be used to add interactivity to the subscripted text, such as triggering animations or displaying additional information when the text is clicked or hovered over. However, it’s important to use them judiciously and with consideration for accessibility and usability.
Other Attributes
In expansion to the Global Attributes, the following is a list of attributes that are specific to the HTML sub tag.
There are no other specific attributes that are available for the <sub> tag in HTML beyond the global and event attributes. However, you can use any attribute that is valid in HTML with the <sub> tag.
For example, you could use the data-* attributes to store custom data associated with the subscripted text. These attributes can be accessed via JavaScript to retrieve the data and perform certain actions based on the values stored.
Here’s an example of using a data-* attribute with the <sub> tag:
<p>The chemical formula for water is H<sub2</sub><span data-info="Water is a polar molecule.">O</span>.</p>In this example, we have used a data-info attribute on the <span> tag to store additional information about the letter “O” in the chemical formula for water. This information can be accessed via JavaScript and used to display a tooltip or additional information when the user hovers over the letter “O”.
Note On Sub HTML Tag
Here are some important notes to keep in mind when using the <sub> tag in HTML:
- The
<sub>tag is used to create subscripted text, which is text that appears below the baseline of the surrounding text. This is commonly used in mathematical formulas and chemical equations. - The
<sub>tag is a semantic tag, meaning that it provides meaning and context to the content it surrounds. It is important to use semantic tags whenever possible to help make your HTML more accessible and understandable to both humans and machines. - It is important to remember that the subscripted text should not be used for styling purposes only. If you want to make text smaller or change its position, use CSS instead of the
<sub>tag. - The subscripted text should be used only for text that is actually supposed to be subscripted, such as numbers in a chemical formula. Using it for regular text can make it harder to read and understand.
- When using the
<sub>tag, it’s a good idea to provide additional context or information about the subscripted text if needed, such as with the use oftitleordata-*attributes. - Be aware that not all fonts support subscripted text. If the subscripted text does not appear correctly, try using a different font or style it with CSS instead.
Browser Compatibility
The HTML sub tag has essential support with the following browsers:
- Chrome
- Internet Explorer (IE)
- Opera
- Safari (WebKit)
- Firefox (Gecko)
- Android
- Firefox Mobile (Gecko)
- Edge Mobile
- Opera Mobile
- Safari Mobile
Examples of HTML sub tag
HTML 4.01 Transitional Document
Here’s an example of an HTML 4.01 Transitional document that includes the use of the sub tag:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Example Document with Subscript</title>
</head>
<body>
<h1>Example Document with Subscript</h1>
<p>This is an example of using the <sub>sub</sub> tag in HTML. The sub tag is used to indicate that some text should be displayed in subscript.</p>
<p>For example, the chemical formula for water is H<sub>2</sub>O. The subscript "2" indicates that there are two hydrogen atoms in each water molecule.</p>
</body>
</html>
In this example, we have an HTML 4.01 Transitional document that includes the sub tag in two different places. The sub tag is used to indicate that some text should be displayed in subscript.
In the first usage, the sub tag is used to display the word “sub” in subscript as an example of how the tag can be used.
In the second usage, the sub tag is used to display the number “2” in subscript as part of the chemical formula for water.
When the document is rendered in a web browser, the text inside the sub tags will be displayed in a smaller font and lower position than the surrounding text, indicating that it is subscript.
Note that the main difference between this example and the previous example using HTML5 is the DOCTYPE declaration at the beginning of the document. The HTML5 example uses the HTML5 DOCTYPE, while this example uses the HTML 4.01 Transitional DOCTYPE.
XHTML 1.0 Transitional Document
Here’s an example of an XHTML 1.0 Transitional document that includes the use of the sub tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Document with Subscript</title>
</head>
<body>
<h1>Example Document with Subscript</h1>
<p>This is an example of using the <sub>sub</sub> tag in HTML. The sub tag is used to indicate that some text should be displayed in subscript.</p>
<p>For example, the chemical formula for water is H<sub>2</sub>O. The subscript "2" indicates that there are two hydrogen atoms in each water molecule.</p>
</body>
</html>In this example, we have an XHTML 1.0 Transitional document that includes the sub tag in two different places. The sub tag is used to indicate that some text should be displayed in subscript.
In the first usage, the sub tag is used to display the word “sub” in subscript as an example of how the tag can be used.
In the second usage, the sub tag is used to display the number “2” in subscript as part of the chemical formula for water.
When the document is rendered in a web browser, the text inside the sub tags will be displayed in a smaller font and lower position than the surrounding text, indicating that it is subscript.
Note that the main difference between this example and the previous examples is the DOCTYPE declaration and the addition of the xmlns attribute in the html tag. In XHTML, the DOCTYPE declaration is mandatory, and the xmlns attribute is required to associate the document with the XHTML namespace. Additionally, all tags must be closed properly in XHTML.
XHTML 1.0 Strict Document
Here’s an example of an XHTML 1.0 Strict document that includes the use of the sub tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Document with Subscript</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Example Document with Subscript</h1>
<p>This is an example of using the <sub>sub</sub> tag in HTML. The sub tag is used to indicate that some text should be displayed in subscript.</p>
<p>For example, the chemical formula for water is H<sub>2</sub>O. The subscript "2" indicates that there are two hydrogen atoms in each water molecule.</p>
</body>
</html>In this example, we have an XHTML 1.0 Strict document that includes the sub tag in two different places. The sub tag is used to indicate that some text should be displayed in subscript.
In the first usage, the sub tag is used to display the word “sub” in subscript as an example of how the tag can be used.
In the second usage, the sub tag is used to display the number “2” in subscript as part of the chemical formula for water.
When the document is rendered in a web browser, the text inside the sub tags will be displayed in a smaller font and lower position than the surrounding text, indicating that it is subscript.
Note that the main difference between this example and the previous example using XHTML 1.0 Transitional is the DOCTYPE declaration. XHTML 1.0 Strict is a more restrictive version of XHTML that does not allow certain elements and attributes that are allowed in XHTML 1.0 Transitional. Additionally, the meta tag is included to specify the character encoding of the document.
XHTML 1.1 Document
Here’s an example of an XHTML 1.1 document that includes the use of the sub tag:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Document with Subscript</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Example Document with Subscript</h1>
<p>This is an example of using the <sub>sub</sub> tag in HTML. The sub tag is used to indicate that some text should be displayed in subscript.</p>
<p>For example, the chemical formula for water is H<sub>2</sub>O. The subscript "2" indicates that there are two hydrogen atoms in each water molecule.</p>
</body>
</html>In this example, we have an XHTML 1.1 document that includes the sub tag in two different places. The sub tag is used to indicate that some text should be displayed in subscript.
In the first usage, the sub tag is used to display the word “sub” in subscript as an example of how the tag can be used.
In the second usage, the sub tag is used to display the number “2” in subscript as part of the chemical formula for water.
When the document is rendered in a web browser, the text inside the sub tags will be displayed in a smaller font and lower position than the surrounding text, indicating that it is subscript.
Note that the main difference between this example and the previous examples is the DOCTYPE declaration. XHTML 1.1 is a more recent version of XHTML that includes some changes and improvements compared to earlier versions. Additionally, the xml declaration at the beginning of the document specifies the XML version and encoding of the document.
