<sup>

Overview

The <sup> element defines inline text that should be displayed as a superscript, used primarily to represent typographical conventions that have specific meanings. Commonly, superscripts appear with a raised baseline and are typically rendered in a smaller text size than the surrounding content.

Examples and Usage

Superscripts are widely used in various contexts, including scientific notation, mathematical expressions, and typographic conventions.

A potential use case of the <sup> element is to represent exponents, such as in Einstein's famous equation for energy-mass equivalence:

<p>
  <var>E</var> = <var>m</var><var>c</var><sup>2</sup> is the world's most famous equation.
</p>

Using the <sup> element in this context ensures the correct representation of the exponent.

In the rendered HTML, the formula may be italicized due to the use of the <var> element, and the "2" will be displayed as a superscript.

Note: For more elaborate and complex mathematical notations involving superscripts, using MathML (Mathematical Markup Language) is advised.

The element could also be used for ordinal numbers, which indicate the order in a sequence (e.g., 1st, 2nd, 3rd).

<p>The 1<sup>st</sup> of January marks the beginning of the year.</p>

In the rendered HTML, the "st" in "1st" will be displayed as a superscript.

Superior lettering is another potential use case. It's a typographic practice where certain letters are raised and reduced in size, commonly used in languages like Italian, French, Spanish, and Portuguese. The <sup> element can be employed to represent this typographic convention, but if the goal is to achieve superscript styling without conveying a specific meaning, it's advisable to use CSS techniques.

Attribute Breakdown

The <sup> element doesn't have any specific attributes; it inherits global attributes common to all HTML elements.

Accessibility Aspects

The <sup> element doesn't have a direct role in ARIA (Accessible Rich Internet Applications). Even though a superscript role exists, it's not typically linked with this element. It's advisable not to use aria-label or aria-labelledby for naming the element. Still, it can accept global aria-* attributes for potential roles it might assume.

Associated Elements

• <sub>

Additional Notes

• The <sup> element should be used when there's a meaningful context for the superscript in the content. For design-driven purposes without specific connotations, CSS's vertical-align property is the appropriate choice.

• The <sup> element cannot be used simultaneously with the <sub> element to produce both a subscript and a superscript adjacent to each other.

• For detailed mathematical notations involving subscripts and superscripts, MathML (Mathematical Markup Language) is a fitting choice. MathML is an XML-based language and integrates seamlessly with other web standards including HTML, CSS, DOM, and JavaScript. It's designed to describe mathematical notations while capturing their structure and content. In MathML, elements like <msub>, <msup>, and <msubsup> cater specifically to such needs.

Browser Compatibility

For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.

Useful Resources

Can I use HTML element: sup

The HTML Living Standard Specification: sub and sup