HTML superscript tag


The <sup> tag in HTML is used to display superscript text. Superscript text appears slightly higher than the baseline of the surrounding text and is typically used for mathematical or scientific notations, such as exponents or footnotes.

Key Features:

  • Superscript Text: Renders text in a smaller size and higher position compared to the surrounding text.
  • Semantic Meaning: Indicates that the enclosed text is a superscript, providing context for mathematical or scientific expressions.

Basic Syntax:

<p>E = mc<sup>2</sup></p>

In this example:

  • The <sup> tag is used to display "2" as a superscript in the equation E=mc2E = mc^2.

Example:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sup Tag Example</title> </head> <body> <p>The quadratic formula is x = (-b ± √(b<sup>2</sup> - 4ac)) / 2a</p> <p>In chemistry, H<sub>2</sub>O is the formula for water.</p> <p>Footnote example<sup>1</sup></p> </body> </html>

In this example:

  • The <sup> tag is used to format "2" in b2b^2 and "1" as superscripts for mathematical formulas and footnotes.

Use Cases:

  • Mathematical Notations: Displaying exponents or powers in mathematical equations.
  • Scientific Formulas: Representing chemical formulas, such as H2OH_2O, where subscripts are used for molecules, and superscripts can be used for isotope notation.
  • Footnotes: Indicating footnote references in text, where superscripts often denote reference markers.

Styling:

By default, the browser displays text within the <sup> tag in a smaller font size and positioned higher than the surrounding text. You can adjust the styling with CSS if needed.

sup { font-size: 0.8em; /* Optional: adjust the font size */ vertical-align: super; /* Ensures the text is aligned correctly */ }

Key Points:

  • Purpose: The <sup> tag is used to display text in superscript format, which is smaller and positioned higher than the surrounding text.
  • Usage: Ideal for mathematical equations, scientific notations, and footnotes.
  • Styling: By default, the browser renders superscript text in a smaller font and higher position, but additional styling can be applied with CSS.

In summary, the <sup> tag in HTML is used to render text as superscript, making it appear smaller and positioned higher than the surrounding text. It is commonly used in mathematical, scientific, and textual contexts where superscript formatting is required.