Learn how to use the HTML <sub> element to display text as subscript, essential for chemical formulas and mathematical notation.
What it is
The <sub> element defines inline text that should be displayed lower than the baseline of the surrounding text. It is a semantic tag specifically designed for typographic effects like subscripts in chemistry (e.g., H2O) or mathematics (e.g., xi). Unlike CSS-based positioning, <sub> conveys meaning to assistive technologies and search engines, indicating that the enclosed text is part of a larger term rather than just visually lowered.
Why it matters
- Semantic Accuracy: Screen readers can interpret subscripted text correctly within context, improving accessibility.
- Standardization: Provides a consistent way to render scientific notation across different browsers without custom CSS.
- SEO Benefits: Search engines understand the relationship between characters in terms like CO2, potentially improving indexing for technical content.
- Simplicity: Requires no external stylesheets or complex markup for basic subscript needs.
Syntax or steps
The syntax is straightforward. Wrap the character(s) you want to appear below the baseline inside opening and closing <sub> tags. This element is inline, so it flows naturally with surrounding text.
<p>Normal Text <sub>Subscript</sub> Normal Text</p>Example
Here is a realistic example demonstrating chemical formulas and a simple mathematical index.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Subscript Example</title>
</head>
<body>
<h1>Chemical Formulas</h1>
<p>Water is composed of two hydrogen atoms and one oxygen atom: H<sub>2</sub>O.</p>
<p>Carbon dioxide consists of one carbon atom and two oxygen atoms: CO<sub>2</sub>.</p>
<h1>Mathematical Notation</h1>
<p>The sum of variables x from i=1 to n is written as Σx<sub>i</sub>.</p>
</body>
</html>Explanation: In the first paragraph, H<sub>2</sub>O renders the "2" smaller and lower than the "H" and "O". Similarly, x<sub>i</sub> places the "i" below the "x", adhering to standard mathematical convention for indices.
Common mistakes
- Using
<sup>instead: Confusing subscript (<sub>) with superscript (<sup>). Superscripts go above the line (like exponents), while subscripts go below. - Nesting incorrectly: Placing block-level elements inside
<sub>. The<sub>element is strictly inline and should only contain text or other inline elements. - Overusing for styling: Using
<sub>merely to make text look small or low for aesthetic reasons when it has no semantic meaning. Use CSS classes for visual-only adjustments. - Forgetting closing tags: While some older parsers might tolerate missing end tags, always close
<sub>explicitly to ensure valid HTML5 structure.
When to use it
Compare <sub> with CSS alternatives to choose the right tool.
| Feature | HTML <sub> |
CSS vertical-align: sub |
|---|---|---|
| Purpose | Semantic meaning (chemistry, math) | Visual presentation only |
| Accessibility | High (screen readers recognize context) | Low (purely visual change) |
| Complexity | Simple tag wrapping | Requires class definition and application |
Use <sub> whenever the lowered text is an integral part of a term's identity. Use CSS if you are simply adjusting layout for design purposes without changing the word's meaning.
Practice
Guided Exercise: Write the formula for Sulfuric Acid (H2SO4) using HTML tags.
Challenge: Create a sentence describing the nth term of a sequence: "Let an represent the value at position n."
Solution Hint: Remember to wrap each number or letter that needs to be lowered in its own pair of <sub> tags.
Quick check
Question: Which tag would you use to write the exponent in E=mc²?
Answer: You would use <sup> (superscript), not <sub>, because exponents appear above the baseline.
Summary
The <sub> element provides a semantic, accessible way to display subscript text for scientific and mathematical notation. By distinguishing meaningful subscripts from purely visual styling, developers ensure better compatibility with assistive technologies and clearer document structure.