Learn how to use the HTML <sup> element to display text as superscript for mathematical exponents, ordinal numbers, and footnote markers.
What it is
The <sup> element defines superscript text. Superscript appears slightly above the normal line of type and is usually smaller in size. It is a semantic inline element, meaning it affects the content's presentation while retaining its logical structure within the document flow. Common related terms include subscript (<sub>) for text below the baseline and vertical alignment CSS properties.
Why it matters
- Mathematical Accuracy: Essential for correctly displaying exponents (e.g., x2) and chemical formulas.
- Ordinal Indicators: Provides a standard way to write dates or rankings like 1st, 2nd, or 3rd.
- Footnote References: Allows linking body text to specific notes at the bottom of a page without disrupting reading flow.
- Semantic Clarity: Screen readers and search engines understand that this text has a special relationship with the preceding character or word.
Syntax or steps
The syntax is straightforward. Wrap the characters you want raised in opening and closing tags. The element must be placed inside a block-level container like a paragraph or heading.
<p>Normal text <sup>raised text</sup> more normal text.</p>Example
Here is a realistic example combining an exponent, an ordinal number, and a footnote reference.
<!DOCTYPE html>
<html>
<body>
<h2>Scientific Notation</h2>
<p>The area of a square with side length s is calculated as A = s<sup>2</sup>.</p>
<h2>Dates and Rankings</h2>
<p>She finished in 1<sup>st</sup> place on July 4<sup>th</sup>.</p>
<h2>Footnotes</h2>
<p>This statement requires further explanation.<sup><a href="#note1">[1]</a></sup></p>
<p id="note1"><small>[1] See appendix B for details.</small></p>
</body>
</html>Part-by-part explanation:
s<sup>2</sup>: Renders the "2" above the "s", indicating squared units.1<sup>st</sup>: Raises the suffix "st" to denote first place.<sup><a href="#note1">[1]</a></sup>: Combines superscript styling with a hyperlink anchor for interactive footnotes.
Common mistakes
- Using CSS instead of HTML: While
vertical-align: superworks visually, using<sup>is preferred for semantics and accessibility. - Nesting incorrectly: Do not nest
<sup>inside another<sup>. If you need complex formatting, use CSS classes. - Forgetting spacing: Ensure there is no unintended whitespace between the base text and the tag if they should appear connected (e.g.,
x2vsx 2). - Misusing for layout: Never use superscript to push text up for visual design tricks; use margins or padding instead.
When to use it
Compare <sup> with <sub> and CSS alternatives.
| Method | Best For | Accessibility |
|---|---|---|
<sup> | Exponents, ordinals, footnotes | High (Semantic) |
<sub> | Chemical formulas (H2O), indices | High (Semantic) |
CSS vertical-align | Custom typography adjustments | Low (Visual only) |
Practice
Guided Exercise: Write a paragraph stating that water boils at 100°C and ice melts at 0°C. Use superscript for the degree symbol if your font supports it, or simply practice raising the "C".
Challenge: Create a simple footnote system where clicking a superscript number jumps to the note at the bottom of the page.
Solution Hint: Use <sup><a href="#id">...</a></sup> for the link and ensure the target element has a matching id.
Quick check
Question: Which tag would you use to write the chemical formula for carbon dioxide?
Answer: You would use <sub> for the numbers (CO2), not <sup>, because subscripts are used for atomic counts in chemistry.
Summary
The <sup> element is a vital tool for precise scientific and typographic expression in HTML. By using it semantically rather than relying solely on CSS, you ensure better accessibility and clearer document structure for both users and machines.