👀 Live Preview
Water formula with subscript hydrogen count:
H2O
HTML <sub> Tag
Overview
What You’ll Learn
The <sub> tag renders subscript text below the baseline. This guide covers syntax, chemical formulas, mathematical indices, sub vs sup, accessibility, and best practices for beginners.
Subscript Text
Text below the baseline.
Chemical Formulas
H2O and compound notation.
Math Indices
Variable subscripts like A1.
Core Syntax
Inline opening and closing tags.
sub vs sup
Below vs above baseline.
Best Practices
Semantic, accessible markup.
Fundamentals
What Is the <sub> Tag?
The <sub> tag is an HTML element used to render text in a subscript style. Subscripted text appears slightly below the baseline and is commonly used for mathematical indices, chemical formulas, and variable notation.
Valid HTML5 — Subscript Semantics
Use sub when characters genuinely belong below the line, such as the 2 in H2O. For superscript (above the line), use <sup> instead.
The sub element is inline and flows naturally inside paragraphs, headings, and other text content without breaking the line.
Foundation
📝 Syntax
Enclose the subscript content within opening and closing sub tags:
syntax.html
<sub>Your subscripted text here</sub>Chemical Formula Example
chemical-formula.html
<p>This is a chemical formula: H<sub>2</sub>O</p>Syntax Rules
subis phrasing content — use inline inside block elements likeportd.- Self-closing syntax (
<sub />) is not valid in HTML. - Wrap only the characters that belong in subscript, not entire words unless appropriate.
- For complex math, consider MathML or dedicated math libraries in advanced projects.
Cheat Sheet
⚡ Quick Reference
| Topic | Code Snippet | Notes |
|---|---|---|
| Basic sub | <sub>...</sub> | Subscript |
| Water formula | H<sub>2</sub>O | Chemistry |
| Math index | A<sub>1</sub> | Variables |
| vs sup | sub = below | sup = above |
| Footnote refs | Prefer sup | Common convention |
| Browser support | Universal | All browsers |
Comparison
⚖️ <sub> vs <sup>
| Element | Position | Common uses |
|---|---|---|
<sub> | Below baseline (subscript) | H2O, A1, CO2 |
<sup> | Above baseline (superscript) | x2, footnote markers[1] |
| Appearance | Both smaller than surrounding text | Browser default typography |
| Footnotes | sup is standard | sub for true subscript only |
Reference
🧰 Attributes
The <sub> tag has no tag-specific attributes. Combine it with global attributes for styling when needed.
attributes.html
<p>This is a chemical formula: H<sub>2</sub>O</p>class / id GlobalHook for CSS targeting subscript styling in formulas or notation.
class="subscript"style GlobalInline font-size or vertical-align tweaks (rarely needed).
style="font-size: 0.75em"title OptionalTooltip explaining a subscript symbol or abbreviation.
title="Index 1"lang OptionalDeclare language when subscript text differs from the page.
lang="en"Hands-On
Examples Gallery
Chemical formulas, mathematical indices, and reference markers with copy-ready code and live previews.
📚 Common Use Cases
Use <sub> for chemical formulas, mathematical indices, and any text that belongs below the baseline.
Chemical Formulas
Represent subscript numbers in chemical compounds such as water:
chemical-formula.html
<p>This is a chemical formula: H<sub>2</sub>O</p>Mathematical Notations
The sub tag is commonly used in mathematical expressions to represent indices or subscripts:
mathematical-notations.html
<p>
The area (A<sub>1</sub>) of the first circle is smaller than the area (A<sub>2</sub>) of the second circle.
</p>Reference Markers
Subscript can mark reference indices in technical prose. For typical footnote numbers, sup is the more common choice:
reference-markers.html
<p>This statement requires clarification<sub>1</sub>.</p>A11y
♿ Accessibility
- Use sub semantically — Apply it only when content belongs in subscript form.
- Ensure readability — Subscript text should remain legible at default or slightly reduced size.
- Provide context — Surrounding text should make the meaning of subscripts clear.
- Choose sup for footnotes — Footnote reference numbers typically use
sup, notsub.
🧠 How <sub> Works
1
Author wraps subscript text
Characters that belong below the baseline go inside sub.
Markup
2
Browser lowers typography
Default styles render text smaller and below the baseline.
Display
3
Formula reads correctly
H2O and A1 display with proper scientific notation.
UX
=
Precise subscript presentation
Scientific and mathematical content is visually accurate and semantically correct.
Compatibility
Browser Support
The <sub> tag is supported in all major browsers, including Internet Explorer.
Baseline · HTML4 / HTML5
Subscript everywhere
All browsers render <sub> with subscript typography by default.
100% Core tag support
Google Chrome Fully supported
Full supportMozilla Firefox Fully supported
Full supportApple Safari Fully supported
Full supportMicrosoft Edge Fully supported
Full supportInternet Explorer Fully supported · EOL
Full supportOpera Fully supported
Full support<sub> tag 100% supported
Bottom line: Use <sub> confidently for subscript text in any browser.
Wrap Up
Conclusion
Mastering the <sub> tag helps you present subscripted text with precision. Whether writing chemical formulas or mathematical indices, sub enhances visual clarity and semantic accuracy in your HTML documents.
Pro Tips
💡 Best Practices
✅ Do
- Use
subfor genuine subscript content like H2O - Combine with appropriate text elements for semantic markup
- Use
supfor superscript and footnote markers - Keep subscript characters short and meaningful
❌ Don’t
- Use
subfor decorative positioning without meaning - Wrap entire sentences in
sub - Use
subwhensupis the correct notation - Rely on CSS alone when semantic subscript markup is appropriate
Summary
Key Takeaways
Knowledge Unlocked
Six truths every developer should know about <sub>
Bookmark these before you write subscript text on your pages.
6
Core concepts 01
Subscript
Below baseline.
Purpose 02
H2O
Chemistry.
Use case 03
A1
Math indices.
Pattern 04
vs sup
Above vs below.
Comparison 05
Semantic
Meaningful use.
A11y 06
100% Support
All browsers.
Compatibility❓ Frequently Asked Questions
It renders subscript text below the baseline for chemical formulas, mathematical indices, and variable notation.
sub places text below the baseline. sup places text above it, such as exponents or footnote markers.No. Use global attributes like
class, id, and style.Yes. Write H2O as H + sub 2 + O in your HTML markup.
Yes. Full support in every major browser including Internet Explorer.
Write subscript formulas
Practice <sub> for chemistry, math, and scientific notation in the Try It editor.
About the author
6 people found this page helpful