To declare a text as a superscript in HTML, use the tag. A superscript is a smaller-sized text that is displayed half above the standard baseline. For instance, 23, 5th, etc.

The inline text that is to be shown as a superscript for typographical purposes only is specified by the HTML element. Typically, superscripts are shown with a raised baseline and smaller font.

Attributes

Only the global attributes are included in this element.

Useful Remarks

The element should not be used for presentation or appearance alone; rather, it should only be used typographically, i.e., to reposition the text to conform to typographical rules or standards.

For example, instead of using , CSS (probably vertical-align) should be used to design a company's or product's wordmark that employs an elevated baseline. For example, vertical-align: super or vertical-align: 50% to move the baseline up by 50% may be used to do this.

Use cases that are suitable for consist of (but are not restricted to):

Presenting exponents like "x3". For this, especially in more complicated situations, it could be worthwhile to take into account using MathML. Look under the Examples below for Exponents.

Using higher letters, as several languages do when expressing certain acronyms. For instance, the French term "mademoiselle" can be shortened to "Mlle"; this is a legitimate usage case. For examples, see Superior lettering.

The symbol "4th" is used to represent ordinal numbers rather than "fourth." For instance, see Ordinal numbers.

Syntax:

<sup>text</sup>

To utilize the element, type the content like this: text between the opening and closing tags.

Example:

<p>Class 6<sup>th</sup></p>

Now, this will be rendered as:

Attributes (Global+Event)

The tag only has global attributes added to it; no particular attributes are present.

NOTE: To adhere to typographical traditions and standards, the tag, which is the superscript in HTML, is used. The element is located inside the <body> tag, and it is typically used to show superior writing, exponents, and ordinal numerals.

How can We Utilize the HTML Tag?

In HTML, the element is used to display text as a superscript, which is displayed with a smaller font that displays half above the baseline.

Take a2, the 9th

NOTE: The element should not be used only for presentation or appearance; rather, it should only be used to reposition the text by typographical rules and standards.

Example: Using CSS rather than the element is the appropriate way to style a product's wordmark that employs text with a raised baseline. Vertical-align:super or Vertical-align:50% might be used for this.

The following is a discussion of valid usage for the tag, which is not limited to:

Displaying the exponent, like a2.
Displaying excellent lettering. In the past, given names were recorded using abbreviations in English-speaking nations.
For example, in record-keeping, Alexander was referred to by the acronym Alexr.
Displaying ordinal numerals, such as the ninth and the 9th.

Example 1: Exponents

In HTML, superscript is most frequently used to show a number's exponent or power.

<p>Formula for Pythagoras theorem: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>

Output

Example 2: Outstanding Calligraphy

For HTML superior lettering, use the element. In the past, names were recorded using abbreviations in English-speaking nations.

<p>We can write coding as Cod<sup>g</sup> for record-keeping</p>

Output:

Example 3: Numbers with Ordinals

Ordinal numbers in HTML are shown using superscript. Numericals shown as superscripts and language-specific text can be used to illustrate this.

<p>Class tenth is written as 10<sup>th</sup></p>

Output:

Use CSS to Set the Superscript Style

Superscripts in HTML may be styled in two different ways with CSS:

Using vertical-align: super
50% while using vertical-align

Issues with Accessibility

Using the tag when working with superscripts in HTML raises a few accessibility considerations.

The element must be used as no method indicates strength (exponent) in HTML. Because the tag denotes superscript rather than exponent, we cannot expect the browser to read the HTML text 23 as "two superscript three" or "two to the power three" when we use a screen reader. If it does, the text in Superior lettering will sound very strange.

Alternatively, using a Unicode equivalent code may represent the numbers in the exponent without the superscript.

Utilizing HTML Superscripts: Do’s and Don'ts

Let's now explore the skill of appropriately employing superscripts with a list of dos and don'ts.

Take action: Hold onto it readable when used sparingly. Superscripts have the inherent ability to enhance the main points of your writing. Ensuring the superscripted text is still readable is a primary guideline. Even if they are supposed to be somewhat higher and smaller, they shouldn't strain the eyes of your reader. To prevent your superscripts from becoming an annoyance to the reader, make sure you preview your material across a range of devices and screen sizes. This will help you find the ideal balance between style and readability.

Don't Use it too much

Superscripts are fun and offer just the right amount of refinement to your writing. However, it is crucial to utilize this tool cautiously. When used excessively, superscripts may overpower your writing and take attention away from the main story. Use them to draw attention to important details, cite crucial information, or offer more readings, but keep your writing from turning into a superscript maze where the reader becomes disoriented and loses track of the primary argument.

Do: Make Appropriate References with It

Superscripts are one of the most tasteful ways to support scientific facts in your writing with references to books and scholarly publications. Your text will appear more organized and professional if your reference numbers and markers are properly enclosed in superscript tags. This will also help readers find supplementary resources or information without interfering with the story's natural flow. You may use a well-placed superscript to your advantage when creating material that exudes depth and trustworthiness.

Don't: Neglect Regularity

Just like with anything else in content development, consistency in style is essential. Superscripts should always appear in the same way in your writing, whether they are used to indicate footnotes, emphasize a phrase, or illustrate a mathematical equation. The organized display of your material not only establishes a unified appearance but also contributes to the development of a robust brand identity. Whether you're creating a blog post or a website, maintaining a consistent superscript style will help you get a polished and aesthetically attractive result.

Conclusion

In HTML, a text may be shown as superscript by using the tag.
By putting a2 in HTML, we may utilize superscript to render a2.
In HTML, superscripts are frequently used to show ordinals, exponents, and superior letters.

← Prev Next →

HTMLs Tutorial

HTML5 Advance

Misc