WebToolsPlanet
Developer Tools

HTML Subscript Generator

Generate a <sub> subscript element for chemical formulas, footnote markers, and mathematical notation — and copy the HTML with live preview.

Last updated: May 21, 2026

Client-Side Processing
Input Data Stays on Device
Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is HTML Subscript Generator?

The HTML `<sub>` element renders its content as a subscript — text positioned below the baseline at a smaller size. It is the correct semantic element for typographical subscripts that carry meaning, such as:

- Chemical formulas: H`<sub>`2`</sub>`O (water), CO`<sub>`2`</sub>` (carbon dioxide) - Mathematical notation: log`<sub>`n`</sub>` (logarithm base n) - Footnote or endnote markers in some languages

For purely decorative vertical text positioning without semantic meaning, use CSS `vertical-align: sub` instead.

How to Use HTML Subscript Generator

1

Enter the subscript text (e.g. "2" for H₂O)

2

Optionally add id, class, or title attributes

3

Copy the generated HTML and insert it within surrounding text

Common Use Cases

  • Science content authors writing chemical formula pages.
  • Educators marking up mathematical expressions with subscript notation.
  • Developers generating footnote reference markers in article templates.

Example Input and Output

A subscript "2" for the water molecule formula.

Configuration
Text: 2
HTML output
<sub>2</sub>

Privacy

All HTML generation runs in your browser. No data is sent to any server.

Frequently Asked Questions

Should I use <sub> or CSS vertical-align: sub?
Use <sub> when the subscript has typographic meaning (chemical formula, footnote). Use CSS when you want the visual effect only, without the semantic implication — for example, a stylistic design choice.
How do I write a full chemical formula like H₂O in HTML?
Write: H<sub>2</sub>O — the plain "H" and "O" are just text, only the "2" is wrapped in <sub>. No special wrapper is needed for the whole formula.

Related Tools

HTML Superscript Generator
Generate HTML <sup> superscript elements for exponents, ordinal indicators, footnote references, and trademark symbols. Live preview included.
HTML Emphasize Text Generator
Generate HTML <em> (emphasize) elements with optional id, class, title, and lang attributes. Adds semantic stress emphasis to inline text. Live preview included.
HTML Strong Text Generator
Generate HTML <strong> elements for strong importance, seriousness, or urgency. Configure id, class, title, and lang attributes. Live preview included.
HTML Mark Text Generator
Generate HTML <mark> elements to highlight text for reference or search result emphasis. Configure id, class, and title attributes. Live preview included.
HTML Underlined Text Generator
Generate HTML <u> underline elements for unarticulated annotations, proper noun marking, and spelling error indication. Configure id, class, title, and lang. Live preview.
Code to Image Converter
Convert code snippets to beautiful images for sharing.