Subscript refers to a style of text formatting where characters are set slightly below the normal line of text and are usually rendered in a smaller font size. Examples of subscript usage include:
- Chemical formulas: H2O, CO2
- Mathematical notations: x1, y2
- Technical references: Aij
How to Use Subscript in HTML?
The HTML <sub> tag is specifically designed for subscript text. It is easy to use and supported by all major browsers.
Syntax
<sub>content</sub>
Using Subscript in HTML
1. Chemical Formulas
Subscript is widely used to denote the number of atoms in chemical compounds.
HTML
<!--Driver Code Starts-->
<html>
<head></head>
<body>
<h1>Chemical Formulas with Subscript</h1>
<!--Driver Code Ends-->
<p>Water: H<sub>2</sub>O</p>
<p>Carbon Dioxide: CO<sub>2</sub></p>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
In this example the <sub> tag for subscripts, representing elements and their quantities in compounds.
2. Mathematical Expressions
HTML
<!--Driver Code Starts-->
<html>
<head></head>
<body>
<h1>Mathematical Expressions</h1>
<!--Driver Code Ends-->
<p>The point is denoted as P<sub>i</sub> in the graph.</p>
<p>The variable is expressed as x<sub>1</sub> + y<sub>2</sub>.</p>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
In this example, the <sub> tag lowers the text to denote indices or variables in mathematical equations.
3. Technical Notations
HTML
<!--Driver Code Starts-->
<html>
<head></head>
<body>
<!--Driver Code Ends-->
<p>Matrix elements are represented as A<sub>ij</sub>.</p>
<p>Footnotes are referenced as text<sub>1</sub>.</p>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
In this example, the <sub> tag is used to define indices for technical terms or to represent footnotes.
Styling the <sub> Tag with CSS
By default, subscript text is smaller and lowered below the baseline. You can further customize its appearance using CSS
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
sub {
font-size: 0.75em;
color: blue;
vertical-align: sub;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>Scientific Notation</h1>
<p>Avogadro's Number: 6.022 × 10<sup>23</sup></p>
</body>
</html>
<!--Driver Code Ends-->
- font-size: Adjusts the size of the subscript text relative to the surrounding text.
- color: Changes the text color for better visibility.
- vertical-align: Ensures proper positioning of the subscript text below the baseline.
Best Practices
- Use Semantically: Use the <sub> tag only when text needs to appear as a subscript. This improves semantic HTML and accessibility.
- Combine with CSS: Apply consistent styling to subscript text across your webpage using CSS.
- Accessibility: Use descriptive text or ARIA labels if the meaning of the subscript isn’t immediately obvious to screen readers.
Similar Reads
HTML Superscript Superscript refers to a style of text formatting where characters are set slightly above the normal line of text and are usually rendered in a smaller font size. Examples of superscript usage include:Exponents in mathematics: x2Chemical isotopes: 14COrdinals: 1st, 2ndHow to Use Superscript in HTML?T
2 min read
HTML JavaScript HTML JavaScript is the most popular programming language that helps to add interactivity and provides dynamic behavior. It is known as the client-side scripting language for web pages. JavaScript is used for various purposes, including DOM manipulation, asynchronous requests (AJAX), event handling,
2 min read
HTML DOM Subscript Object The Subscript Object in HTML DOM is used to represent the HTML <sub> element. The subscript element can be accessed by using the getElementById() method. Syntax: document.getElementById("id") Where id is assigned to the <sub> tag. Example 1: In this example, we will use DOM Subscript Obj
1 min read
JavaScript HTML DOM The JavaScript HTML DOM (Document Object Model) is a powerful tool that represents the structure of an HTML document as a tree of objects. It allows JavaScript to interact with the structure and content of a webpage. By manipulating the DOM, you can update the content, structure, and styling of a pa
4 min read
HTML DOM Superscript Object The superscript object in HTML DOM is used to represent the HTML <sup> element. The superscript element can be accessed by using getElementById(). Syntax: document.getElementById("id") Where id is assigned to the <sup> tag. Example: In this example, we will use DOM Superscript Object HTM
1 min read