The <sup> tag in HTML is used to create superscript text within your document. Superscript text is typically rendered smaller and raised above the baseline of the surrounding text. It is commonly used for a variety of purposes, including mathematical exponents, footnotes, and abbreviations. Here's how to use the <sup> tag and some examples of its usage:

html<sup>Superscript Text</sup>

Example:

html<p>This is a normal sentence with some <sup>superscript text</sup>.</p>

Attributes:

The <sup> tag does not have any specific attributes. It is primarily used for text formatting, and any additional styling can be applied using CSS.

Common Use Cases:

1. Mathematical Exponents: The <sup> tag is often used to display mathematical exponents. For example, x² (x squared) can be written as x<sup>2</sup>.

2. Footnotes: Superscript numbers are used to reference footnotes or endnotes in academic or scholarly writing. For instance, "This is a sentence with a footnote<sup>1</sup>." The actual footnote content is typically provided at the bottom of the page or the end of the document.

3. Abbreviations: Some abbreviations are conventionally written with superscript letters, such as "mph" for miles per hour.

4. Copyright and Trademark Symbols: Copyright (©) and trademark (â„¢) symbols are often written in superscript, and the <sup> tag can be used for this purpose.

Styling with CSS:

While the <sup> tag provides the basic functionality of creating superscript text, you can use CSS to further style and format the superscript text. For example, you can adjust the font size, vertical alignment, and color of the superscripted text to match your document's design.

Here's an example of how you might use CSS to style <sup> text:

html<p>This is a normal sentence with some <sup class="superscript">superscript text</sup>.</p>

css.superscript {
  font-size: 75%;
  vertical-align: super;
  color: #999; /* Set the color to gray, for example */
}

In this example, the <sup> text is given the class "superscript," and CSS rules are applied to reduce its font size, align it vertically as superscript, and change its color to gray.

The <sup> tag is a useful tool for adding superscript text to your HTML documents, whether it's for mathematical notations, footnotes, abbreviations, or other cases where raised and smaller text is needed.