HtmlHow-ToBeginner · 3 min read

How to Create Subscript in HTML: Simple Syntax and Examples

To create subscript text in HTML, use the  tag around the text you want to appear smaller and lower than the normal text line. For example, 2 will display the number 2 as subscript.

📐

Syntax

The  tag is used to define subscript text in HTML. It lowers the text and makes it smaller compared to the surrounding text.

: Opens the subscript tag.
Text inside: The content you want to show as subscript.
: Closes the subscript tag.

html

<sub>subscript text</sub>

Output

subscript text

💻

Example

This example shows how to write chemical formulas using subscript to display numbers below the text baseline.

html

<!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>
</head>
<body>
  <p>Water formula: H<sub>2</sub>O</p>
  <p>Carbon dioxide: CO<sub>2</sub></p>
  <p>Area of square: a<sub>1</sub> + a<sub>2</sub></p>
</body>
</html>

Output

Water formula: H₂O Carbon dioxide: CO₂ Area of square: a₁ + a₂

⚠️

Common Pitfalls

Some common mistakes when using subscript in HTML include:

Using CSS vertical-align instead of the  tag, which may not be semantic or accessible.
Forgetting to close the  tag, which can break the layout.
Using subscript for styling only, instead of meaningful semantic markup.

html

<!-- Wrong: Using CSS only -->
<p>H<span style="vertical-align: sub; font-size: smaller;">2</span>O</p>

<!-- Right: Using semantic HTML -->
<p>H<sub>2</sub>O</p>

Output

H₂O H₂O

📊

Quick Reference

Use the  tag for subscript text. It is semantic and supported by all browsers. Avoid using CSS tricks for subscript unless necessary for styling.

Tag	Description	Example
	Defines subscript text	`H₂O`
	Defines superscript text (opposite of subscript)	`x²`

✅

Key Takeaways

Use the _{tag to create subscript text in HTML for semantic and accessible markup.}

Always close the _{tag properly to avoid layout issues.}

Avoid using CSS vertical-align for subscript when semantic tags are available.

Subscript is commonly used in chemical formulas, mathematical expressions, and footnotes.

The _{tag is supported by all modern browsers and improves readability.}