Subscript and superscript are essential for displaying mathematical formulas, chemical equations, footnotes, and ordinal numbers. HTML provides two simple elements for this purpose.
The Subscript Element
The <sub> element displays text below the normal baseline in a smaller font size. It's commonly used in chemical formulas, mathematical notation, and variable subscripts.
<p>The chemical formula for water is H<sub>2</sub>O.</p>
<p>Carbon dioxide is written as CO<sub>2</sub>.</p>
<p>In mathematics, x<sub>1</sub>, x<sub>2</sub>, and x<sub>3</sub>
represent different variables.</p>This renders as:
The chemical formula for water is H2O.
Carbon dioxide is written as CO2.
In mathematics, x1, x2, and x3 represent different variables.
Common Uses for Subscript
- Chemical formulas: H2SO4 (sulfuric acid)
- Mathematical notation: an (nth term)
- Programming variables: arrayindex
- Scientific notation: log10
The Superscript Element
The <sup> element displays text above the normal baseline in a smaller font size. It's used for exponents, ordinal numbers, footnote references, and mathematical powers.
<p>Einstein's famous equation is E = mc<sup>2</sup>.</p>
<p>The area of a square is side<sup>2</sup>.</p>
<p>On July 4<sup>th</sup>, we celebrate Independence Day.</p>
<p>This statement needs a citation<sup>[1]</sup>.</p>This renders as:
Einstein's famous equation is E = mc2.
The area of a square is side2.
On July 4th, we celebrate Independence Day.
This statement needs a citation[1].
Common Uses for Superscript
- Exponents: 28 = 256
- Ordinal numbers: 1st, 2nd, 3rd
- Footnote references: See reference3
- Mathematical notation: xn
- Trademark symbols: Brand®, Product™
Practical Examples
Mathematical Formula
<section>
<h3>The Quadratic Formula</h3>
<p>
The solutions to ax<sup>2</sup> + bx + c = 0 are given by:
</p>
<p>
x = (-b ± √(b<sup>2</sup> - 4ac)) / 2a
</p>
</section>Chemical Equation
<section>
<h3>Photosynthesis</h3>
<p>
6CO<sub>2</sub> + 6H<sub>2</sub>O + light energy →
C<sub>6</sub>H<sub>12</sub>O<sub>6</sub> + 6O<sub>2</sub>
</p>
<p>
Carbon dioxide and water combine to produce glucose and oxygen.
</p>
</section>Footnotes in an Article
<article>
<h2>The History of HTML</h2>
<p>
HTML was invented by Tim Berners-Lee in 1991<sup>[1]</sup>.
The first version of HTML had only 18 elements<sup>[2]</sup>.
</p>
<footer>
<h3>References</h3>
<ol>
<li>Berners-Lee, T. (1991). "WorldWideWeb browser"</li>
<li>W3C (1995). "HTML 2.0 Specification"</li>
</ol>
</footer>
</article>Scientific Notation
<p>
The speed of light is approximately
3 × 10<sup>8</sup> meters per second.
</p>
<p>
Avogadro's number is 6.022 × 10<sup>23</sup> mol<sup>-1</sup>.
</p>
<p>
The pH scale ranges from 10<sup>-14</sup> to 10<sup>0</sup>.
</p>Combining Subscript and Superscript
You can use both elements together in complex formulas:
<p>
The isotope notation for Carbon-14 is
<sup>14</sup><sub>6</sub>C.
</p>
<p>
In tensor notation: T<sup>i</sup><sub>j</sub>
</p>
<p>
Chemical ion: SO<sub>4</sub><sup>2-</sup> (sulfate ion)
</p>Accessibility Considerations
When using subscript and superscript, keep these accessibility tips in mind:
- Screen readers may not always announce subscript or superscript differently
- For important scientific notation, consider providing alternative text or explanations
- Don't rely solely on superscript for critical information (like footnote numbers)
- Very small subscript/superscript text can be hard to read for people with vision impairments
Styling Notes
Both elements have default browser styling, but you can customize them with CSS:
- Default font size is smaller than surrounding text
- Position is automatically adjusted above/below baseline
- Line height is typically not affected
- You can modify size, position, and color with CSS if needed
Common Mistakes to Avoid
❌ Don't do this:
<!-- Don't use for styling purposes only -->
<p>Make this text<sup>tiny and raised</sup></p>
<!-- Don't use HTML entities when sub/sup is better -->
<p>H₂O</p> <!-- Unicode subscript 2 -->
<!-- Don't nest multiple levels -->
<p>x<sup><sup>2</sup></sup></p>✅ Do this instead:
<!-- Use CSS for styling -->
<p>Make this text <span class="small-raised">properly styled</span></p>
<!-- Use semantic HTML elements -->
<p>H<sub>2</sub>O</p>
<!-- Keep it simple -->
<p>x<sup>2</sup></p>Best Practices
- Use sub and sup for semantic meaning, not just visual effect
- Ideal for scientific, mathematical, and technical content
- Keep subscript/superscript text short and simple
- Test readability at different zoom levels
- Consider providing explanations for complex notation
- Don't overuse—too much can make text hard to read
Browser Support
Both <sub> and <sup> elements are supported by all modern browsers and have been part of HTML since the early days. You can use them confidently without worrying about compatibility.
Key Takeaways
<sub>displays text below the baseline (subscript)<sup>displays text above the baseline (superscript)- Essential for chemical formulas, mathematical notation, and footnotes
- Both can be combined for complex scientific notation
- Use semantically, not just for visual styling
- Consider accessibility when using small text
- Fully supported across all browsers
What's Next?
You've now completed the Text and Formatting section! You know how to structure and style text in HTML using headings, paragraphs, formatting elements, quotations, code blocks, and subscript/superscript.
In the next lesson, we'll move on to an essential part of the web: creating links. You'll learn how to use the anchor element to connect your pages and build navigation.