HTML Superscript and Subscript Guide: Semantics, Accessibility, and Examples

Table of Contents

HTML Superscript and Subscript: Semantics, Accessibility, and a Complete Example

 represents superscript and  represents subscript. The point is not merely to make text smaller and move it: the typographic convention conveys meaning. The WHATWG HTML Standard says to use these elements only when removing the script position would change the content's meaning.

1. Quick Decision

Meaning	Element	Simple example
Exponent, language-specific ordinal or abbreviation, footnote marker	`<sup>`	`x<sup>2</sup>`
Chemical formula, variable subscript	`<sub>`	`H<sub>2</sub>O`

Both  and  are inline phrasing content, and neither the start nor end tag may be omitted. Use consistent lowercase tags in HTML; do not copy the old article's  style.

2. Appropriate Semantic Uses

These three lines represent a square, a chemical formula, and an English ordinal. The elements carry meaningful typographic semantics:

<var>x</var><sup>2</sup>
H<sub>2</sub>O
5<sup>th</sup>

Math: simple exponents and variable subscripts can use  and , optionally with <var>. Prefer MathML Core for fractions, roots, sums, simultaneous scripts, and other complex expressions.
Chemistry: H2O works for a simple molecular formula. Consider MathML or an accessible domain-specific representation for isotopes, ions, or complex structures.
Ordinals and abbreviations: use 5th only where that language's typographic convention calls for it; start with natural, understandable text.
Footnotes:  supplies the script semantics and appearance, but navigation still needs a link. Give a number-only link a meaningful accessible name.

<p>
  A statement with a source.
  <sup><a href="#note-1" aria-label="Footnote 1">1</a></sup>
</p>
<ol>
  <li id="note-1">The source for the statement.</li>
</ol>

3. Do Not Use It as a General Positioning Tool

If a trademark, logo, price badge, or decorative word merely needs to move upward, use an ordinary  and CSS instead of inventing superscript semantics:

<span class="brand-mark">TM</span>

.brand-mark {
  font-size: 0.8em;
  vertical-align: super;
}

Browser defaults are usually sufficient. Before overriding font-size, line-height, or vertical-align, test body text, links, multiple fonts, tight line spacing, and high zoom. Very small text reduces legibility; common techniques such as line-height: 0 can also cause overlap in compact layouts. Do not convey important information by baseline position or size alone.

4. Accessibility and Plain-Text Fallbacks

Modern HTML accessibility mappings expose  and  with subscript and superscript semantics, but actual speech can still vary by browser, screen reader, voice, and user settings. Therefore:

Keep the native elements. WAI-ARIA lists the subscript and superscript roles as naming-prohibited, so do not put aria-label or aria-labelledby on  or . Use a visible explanation or MathML when clarification is needed.
Add a visible reading for important or ambiguous notation, such as x2 (x squared) or H2O (H two O, water). Use MathML for complex math.
Make numeric footnotes focusable links with an accessible name such as “Footnote 1,” a real target, and optionally a return link.
Baseline meaning may disappear when copied into plain text, search indexes, or messaging apps. Supply explicit export forms such as x^2, H2O, or Footnote 1; do not assume Unicode super- and subscript characters cover every value.
Set the correct lang on the document and language runs, then test keyboard use, zoom above 200%, and the assistive technologies your project supports.

5. Minimal Complete HTML File

Save the following as sup-sub.html. It has no external scripts or dependencies, keeps the browser's default script typography, and gives visible readings for potentially ambiguous examples.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Semantic superscript and subscript</title>
  <style>
    body {
      max-width: 48rem;
      margin: 2rem auto;
      padding: 0 1rem;
      font: 1rem/1.6 system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <main>
    <h1>Semantic superscript and subscript</h1>

    <p>Equation: <var>x</var><sup>2</sup> (x squared).</p>
    <p>Chemical formula: H<sub>2</sub>O (H two O, water).</p>
    <p>English ordinal: 5<sup>th</sup> (fifth).</p>

    <p>
      A statement with a source.
      <sup>
        <a id="note-ref-1" href="#note-1" aria-label="Footnote 1">1</a>
      </sup>
    </p>

    <section aria-labelledby="notes-heading">
      <h2 id="notes-heading">Notes</h2>
      <ol>
        <li id="note-1">
          The source for the statement.
          <a href="#note-ref-1" aria-label="Back to footnote 1 reference">↩</a>
        </li>
      </ol>
    </section>
  </main>
</body>
</html>

6. How to Validate It

Open sup-sub.html in a browser. Confirm that all four examples are legible, Tab reaches the footnote reference and return link, and both jumps have valid targets.
Run these static DOM assertions in Developer Tools Console. No output means the assertions passed; the browser reports the failing line otherwise.

const expected = { sup: 3, sub: 1 };

console.assert(document.querySelectorAll("sup").length === expected.sup);
console.assert(document.querySelectorAll("sub").length === expected.sub);
console.assert(
  [...document.querySelectorAll("sup, sub")].every(
    (element) => element.textContent.trim().length > 0,
  ),
);

Check the complete file with the W3C Nu HTML Checker. This command sends the file to W3C's public service; do not upload a private page this way. Use an organization-approved local validator instead.

curl -sS 
  -H 'Content-Type: text/html; charset=utf-8' 
  --data-binary @sup-sub.html 
  'https://validator.w3.org/nu/?out=json'

A passing validator is not a completed accessibility test. Also inspect plain-text copying, zoom, keyboard focus, visible explanations, and speech in the target screen-reader combinations.

7. Pre-Publish Checklist

[ ]  or  changes or clarifies the content's meaning.
[ ] Neither element is being used for a logo, badge, or general visual positioning.
[ ] Tags are paired, consistently cased, and validly nested.
[ ] Simple math and chemistry have enough context; complex expressions use MathML.
[ ] Numeric footnotes are accessible links with existing targets and a way back.
[ ] CSS does not make text tiny, overlap it, or use position as the only cue.
[ ] Plain text and copied content remain understandable.
[ ] The complete HTML passes Nu Checker plus keyboard, zoom, and assistive-technology checks.

8. Authoritative Sources

9. Original 2011 Archive

The complete visible body from source_export follows, with only trailing whitespace on each line normalized. It reflects the short note as published then; its uppercase  is not the code style recommended by this maintained edition.

HTML上标和下标


上标：A<sup>A</sup>
 示例：AA

下标：A<SUB>A</SUB>
 示例：AA