Superscript in HTML
FREE
Overview
The <sup> tag in HTML is used to define a text as a superscript in HTML. A superscript is a text that appears half above the normal baseline and is rendered in smaller-sized text.
Example: 23, 5th, etc.
Syntax
To use the <sup> tag, we just have to write the text in between the opening and closing <sup> tag like <sup> text </sup>
Example:
Now, this will be rendered as:
Class 9th
Attributes (Global+Event)
There are no specific attributes applied to the <sup> tag, and Only global attributes are applied to the <sup> tag.
Note: The superscript in HTML, the <sup> tag, is used to comply with the typographical conventions/standards. It is generally used to display ordinal numbers, exponents, and superior lettering, and the <sup> tag is found inside the <body> tag.
How to use <sup> tag in HTML??
The <sup> tag is used in HTML to show a text as a superscript, which appears half above the baseline and is rendered using a smaller text.
Example: a2, 9th
Note: The <sup> tag should only be used to change the position of the text so that it complies with the typographical conventions/standards and should not be used solely for the presentation/appearance purpose.
Example: If we need to style the wordmark of a product that uses text with a raised baseline, it should be done using CSS and not using the <sup> tag. This can be done using vertical-align:super or vertical-align: 50%.
The appropriate uses of the <sup> tag (but not limited to) are discussed below:
- Showing Exponent`, such as a2.
- Showing superior lettering. Earlier in English-speaking countries, abbreviations were used for the recordkeeping of a given name.
Example: for Alexander, the abbreviation Alexr was used in record-keeping. - Showing Ordinal numbers, such as Ninth as 9th
Examples
Example 1: Exponents
The most common use of superscript in HTML is to display the exponent or power of a number.
Example:
This will be rendered as:
The formula of Pythagoras theorem is a2 + b2 = c2
Example 2: Superior Lettering
The <sup> tag is used for superior lettering in HTML. Earlier in English-speaking countries, abbreviations were used for the recordkeeping of a name.
Example:
This will be rendered as:
We can write Alexander as Alexr for record-keeping
Example 3: Ordinal Numbers
Superscript in HTML is used to display ordinal numbers. This can be represented using language-specific text and numerals displayed as superscripts.
Example:
This will be rendered as:
Class fifth can be also written as 5th
Set Style of Superscript with CSS
We can style superscripts in HTML using CSS in two ways:
- Using vertical-align: super
- Using vertical-align: 50%
Accessibility Concerns
There are some accessibility concerns related to superscripts in HTML that we should keep in mind while using the <sup> tag.
As there is no other way to represent power(exponent) in Html, we have to use the <sup> tag. The <sup> tag means superscript and not exponent, so when we are using the screen reader, the HTML text 2<sup>3</sup>, here we cannot expect the browser to read it as “two superscript three” or “two to the power three”, if the browser does it like this then the text in Superior lettering will sound very odd.
We can also use a Unicode equivalent code to display the numbers in the exponent instead of using superscript.
Browser Support
The list of browsers that support the <sup> tag is listed below:
- Chrome
- Edge
- Firefox
- IE
- Safari
- Opera
- Webview android
Conclusion
- The <sup> tag is used to display a text as superscript in HTML.
- We can use superscript in HTML to display a2 by writing a<sup>2</sup> in HTML.
- The common use of superscripts in HTML is to display Exponents, Superior lettering, and Ordinal number.