HTML <sup> Tag Tutorial - Usage, Syntax,
Attributes and Example

calender-iconPublished: 15 May 2025

clock-icon5-min read

printer-icon whatsapp-icon share-icon



close-button
HTML
Table of Contents

INTRODUCTION

The <sup> element is used to make text appear as superscript. According to Merriam-webster Dictionary superscript is a distinguishing symbol (such as a numeral or letter) written immediately above or above and to the right or left of another character

In HTML the subscript is shown by browser with raised baseline and smaller font-size. It is mostly used for typographical (design or style of writing text) conventions of language and not for appearance purposes. The below image will make it clear.

subscript & superscript

Common use cases are as follows.

  • Exponents: In mathematics exponents or power of number is usually written as superscripts for example: x2
  • Ordinal numbers: They represent the position or rank. They can be written in abbreviated form using number and text for example: 1st
  • Superior lettering: It is a lowercase letter placed above baseline for example: commercial written as Commcial

Syntax: 
<sup> - TEXT - </sup>

Example: 

<p> I am 1<sup>st</sup> paragraph. 
</p>

Output:

I am 1st paragraph.



Tag Omission

The HTML <sup> element must have both start tag and end tag.

ATTRIBUTES

The <sup> element only has global attributes.

Frequently Asked Questions (FAQ)

How accessible is it to use the sup tag to represent exponents, like 5²?
Using the sup tag in HTML to indicate powers (e.g., 52) is visually effective, but from an accessibility standpoint, especially for screen readers, it has some limitations.

Screen Readers Don't Interpret Math Semantics: Screen readers typically read 52 as "five two" or "five superscript two" (depending on the reader), not "five squared."

Solution:

1. use MathML 


  <math xmlns="http://www.w3.org/1998/Math/MathML">
    <msup>
      <mn>4</mn>
      <mn>2</mn>
    </msup>
  </math>


2. Use ARIA Labels for Clarity: 


<span aria-label="four squared">4<sup>2</sup></span>

This way, screen readers will say "five squared" instead of "five two."

How do you add superscript in HTML?
To add a superscript in an HTML page, you can use the sup tag. This tag is specifically designed for creating superscript text, which appears slightly above the normal line and is typically smaller in size.

Example:
<sup> - TEXT - </sup>