Using the HTML ^{Tag for Superscript Text: Creating Exponents and Footnotes}

Learn how to use the HTML ^{tag to create superscript text for exponents, footnotes, and other notations. This tutorial explains its functionality, typical rendering, and how to customize its appearance using CSS for improved readability and visual appeal.}

Using the HTML `<sup>` Element for Superscript Text</sup>

Understanding Superscript

The HTML <sup> (superscript) tag is used to display text as superscript—slightly smaller text that appears half a character above the baseline. This is a useful feature for creating text with special formatting requirements, commonly used for footnotes, exponents, or other notations where text needs to be elevated above the normal text line. The visual appearance typically includes a smaller font size, making the superscripted text visually distinct from the surrounding text. Screen readers will interpret this semantic markup to convey the intended meaning of the text appropriately. You can customize the appearance of superscript text using CSS (Cascading Style Sheets).

Using the `<sup>` Tag</sup>

To create superscript text, simply enclose the text you want to superscript within the opening and closing <sup> tags.

<p>x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup></p>

Browser Support for `<sup>`</sup>

The <sup> element enjoys excellent support across major modern browsers.

Default Styling and CSS Customization

Most browsers apply default styles to <sup> elements (typically smaller font size and a vertical offset above the baseline). You can modify this using CSS. For example:

sup {
  vertical-align: super;
  font-size: smaller;
  color: blue;
}