Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to mark text superscript in HTML?
The <sup> tag in HTML is used to mark text as superscript, which appears raised above the normal line of text and is typically rendered in a smaller font size. This element is commonly used for mathematical expressions, footnote references, ordinal numbers, and chemical formulas.
Syntax
Following is the syntax for the superscript tag −
<sup>superscript text</sup>
The <sup> tag requires both opening and closing tags. The text content placed between these tags will be displayed as superscript.
Basic Superscript Example
Following example demonstrates basic usage of the <sup> tag for mathematical expressions −
<!DOCTYPE html> <html> <head> <title>HTML Superscript Text</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Mathematical Expressions</h2> <p>The value of 2<sup>4</sup> = 16</p> <p>Einstein's famous equation: E = mc<sup>2</sup></p> <p>Area of a square: side<sup>2</sup></p> </body> </html>
The output shows the superscript text raised above the baseline −
Mathematical Expressions The value of 2? = 16 Einstein's famous equation: E = mc² Area of a square: side²
Common Use Cases
Footnote References
Superscript is frequently used for footnote markers in academic and professional documents −
<!DOCTYPE html> <html> <head> <title>Footnote References</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px; line-height: 1.6;"> <h2>Article with Footnotes</h2> <p>HTML<sup>1</sup> is the standard markup language for web pages. CSS<sup>2</sup> is used for styling HTML elements.</p> <hr> <h3>References</h3> <p><sup>1</sup> HyperText Markup Language</p> <p><sup>2</sup> Cascading Style Sheets</p> </body> </html>
The footnote numbers appear as small raised text, linking to the references below −
Article with Footnotes HTML¹ is the standard markup language for web pages. CSS² is used for styling HTML elements. ???????????????????????????????? References ¹ HyperText Markup Language ² Cascading Style Sheets
Ordinal Numbers
Superscript can be used for ordinal number indicators −
<!DOCTYPE html>
<html>
<head>
<title>Ordinal Numbers</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Competition Results</h2>
<ul>
<li>1<sup>st</sup> place: John Smith</li>
<li>2<sup>nd</sup> place: Mary Johnson</li>
<li>3<sup>rd</sup> place: David Wilson</li>
<li>4<sup>th</sup> place: Sarah Brown</li>
</ul>
</body>
</html>
The ordinal indicators are displayed as raised text −
Competition Results ? 1?? place: John Smith ? 2?? place: Mary Johnson ? 3?? place: David Wilson ? 4?? place: Sarah Brown
Styling Superscript with CSS
You can customize the appearance of superscript text using CSS properties −
<!DOCTYPE html>
<html>
<head>
<title>Styled Superscript</title>
<style>
.custom-sup {
font-size: 0.7em;
color: red;
font-weight: bold;
}
.large-sup {
font-size: 0.9em;
color: blue;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Custom Superscript Styles</h2>
<p>Default superscript: x<sup>2</sup> + y<sup>2</sup></p>
<p>Custom red superscript: x<sup class="custom-sup">2</sup> + y<sup class="custom-sup">2</sup></p>
<p>Larger blue superscript: x<sup class="large-sup">2</sup> + y<sup class="large-sup">2</sup></p>
</body>
</html>
The output shows different superscript styles applied using CSS −
Custom Superscript Styles Default superscript: x² + y² Custom red superscript: x² + y² (red, bold) Larger blue superscript: x² + y² (blue, larger)
Accessibility Considerations
When using superscript for important information, consider adding alternative text or explanations for screen readers. For mathematical expressions, you may want to include the full equation in the title attribute −
<!DOCTYPE html>
<html>
<head>
<title>Accessible Superscript</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<p title="Two to the power of four equals sixteen">
Mathematical expression: 2<sup>4</sup> = 16
</p>
<p>
See footnote<sup><a href="#footnote1">1</a></sup> for more details.
</p>
<p id="footnote1"><sup>1</sup> This is the referenced footnote.</p>
</body>
</html>
This approach makes the content more accessible to users with screen readers.
Conclusion
The <sup> tag is essential for marking superscript text in HTML, commonly used for mathematical expressions, footnotes, and ordinal numbers. It automatically positions text above the baseline and reduces font size. You can further customize its appearance using CSS while maintaining semantic meaning for accessibility and proper document structure.
2K+ Views
