HtmlHow-ToBeginner · 3 min read

How to Create Superscript in HTML: Simple Syntax & Examples

To create superscript text in HTML, use the  tag around the text you want to raise above the normal line. For example, 2 will display as a small raised 2.

📐

Syntax

The  tag wraps the text that should appear as superscript. It raises the text slightly above the normal line and reduces its size.

: Opens the superscript tag.
Text inside: The content you want to show as superscript.
: Closes the superscript tag.

html

<sup>superscript text</sup>

Output

superscript text

💻

Example

This example shows how to write a mathematical expression with superscript using the  tag.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Superscript Example</title>
</head>
<body>
  <p>Water's chemical formula is H<sup>2</sup>O.</p>
  <p>E = mc<sup>2</sup> is Einstein's famous equation.</p>
</body>
</html>

Output

Water's chemical formula is H²O. E = mc² is Einstein's famous equation.

⚠️

Common Pitfalls

Some common mistakes when using superscript in HTML include:

Using CSS vertical-align instead of the semantic  tag, which can harm accessibility.
Not closing the  tag properly, causing layout issues.
Using superscript for styling only, instead of meaningful content, which can confuse screen readers.

html

<!-- Wrong: using CSS only -->
<p>H<span style="vertical-align: super; font-size: smaller;">2</span>O</p>

<!-- Right: using semantic tag -->
<p>H<sup>2</sup>O</p>

Output

H2O (with 2 raised using CSS) H²O (with 2 raised using )

📊

Quick Reference

Use the  tag to mark superscript text for better accessibility and consistent display across browsers.

Wrap only the text that should be superscripted.
Close the tag properly.
Use semantic tags instead of styling tricks.

✅

Key Takeaways

Use the ^{tag to create superscript text in HTML.}

Always close the ^{tag properly to avoid layout issues.}

Prefer semantic tags over CSS tricks for accessibility.

Superscript text appears smaller and raised above the baseline.

Use superscript for meaningful content like exponents or footnotes.