Lesson 23 — Subscript <sub>

Learning Goals

• Explain what the <sub> element means semantically.
• Write correct chemical formulas and math indices with <sub>.
• Know accessibility considerations and when to prefer CSS.
• Avoid common misuse (e.g., general “small print”).

Part 1 — What is <sub>?

<sub> marks subscript text—characters positioned slightly below the baseline and often rendered smaller. Use it for chemical formulas (H₂O), indices (a_n), and specialized notation.

Part 2 — Minimal Examples

<p>Water: H<sub>2</sub>O</p>
<p>Carbon dioxide: CO<sub>2</sub></p>
<p>Sequence term: a<sub>n</sub> = a<sub>n-1</sub> + d</p>

Result: The 2s and the n are lowered as subscripts.

Part 3 — Best Practices

• Use <sub> for semantic subscripts (science/math), not for generic “smaller text”.
• Pair with <sup> when the notation needs both (e.g., x², a_n).
• For purely visual lowering, prefer CSS: vertical-align: sub; or layout techniques.

Part 4 — Accessibility Notes

Most screen readers read subscript as normal text. Provide context in surrounding copy (e.g., “the formula for carbon dioxide, CO₂”). If subscripts encode critical meaning, consider clarifying textually as well.

Practice Tasks

1. Create lesson-23/index.html and write CO₂, H₂O, and a_n correctly.
2. Add an equation mixing <sub> and <sup> (e.g., x² + y₁).
3. Explain—right in the page—what each subscript conveys.

Quick Quiz

1. What is <sub> meant to represent semantically?
2. Give one valid scientific example and one math example.
3. Why not use <sub> for disclaimers/footnotes?

Lesson 23 Dictionary

Terms and concepts introduced in this lesson. Search or jump by letter.

A

Accessibility (context)

Clarifying meaning in surrounding text so subscripts aren’t ambiguous to assistive tech.

B

Baseline

The invisible line on which most letters sit; subscript text is lowered below this line.

C

Chemical formula

Notation for compounds that often uses subscripts to indicate atom counts (e.g., CO₂).

I

Index (math)

A subscript used to label terms in a sequence or components (e.g., a_n).

M

Meaning (semantics)

The idea that <sub> conveys domain meaning (not just visual decoration).

S

<sub> (Subscript)

HTML element that renders text as subscript for formulas, indices, and specialized notation.