The <sup> Element
As defined in the HTML Living Standard, the <sup> element represents a superscript, which is typically rendered as a smaller character on a higher line than the rest of the text.
Mathematical exponent: E = mc2
Ordinal number: The competition finished on the 4th of July.
Footnote reference: Standards are the foundation of access[1].
<p>The Pythagorean theorem is a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>.</p>
View HTML Living Standard: The sup element
Usage and Meaning
The <sup> element should be used only for typographical conventions where the superscript is semantically necessary.
- Mathematics: Representing powers and exponents.
- Ordinals: Formatting indicators like "st", "nd", "rd", and "th" in specific languages/styles.
- Footnotes: Marking the reference point in the text that links to a note at the bottom of the page.
- Avoid for Abbreviations: Do not use
<sup>for general abbreviations like "Mlle" if the standard<abbr>is more appropriate for the context.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
The Accessibility Challenge: Most screen readers do not announce "superscript" by default. A blind user may hear "E equals m c 2" without knowing the "2" is an exponent.
Solution: If the superscript status is critical (e.g., in math-heavy documents), supplement the markup with hidden text: <sup><span class="sr-only">squared</span>2</sup>. For footnotes, ensure the superscript is wrapped in an <a> tag with an aria-label describing the link's purpose.
Styling and Vertical Rhythm
Standard browser styling for <sup> can often disrupt the line-height of paragraphs, creating uneven vertical gaps.
/* CSS to maintain consistent line-height */
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
top: -0.5em;
}
A11y Tip: Footnote Links
When using <sup> for footnotes, always make the superscript a link to the corresponding note. This satisfies WCAG SC 2.4.4 (Link Purpose) by allowing the user to navigate directly to the supplemental info.