<sup>: The Superscript element
The <sup> HTML element specifies inline text which is to be displayed as superscript for solely typographical reasons. Superscripts are usually rendered with a raised baseline using smaller text.
Try it
Attributes
This element only includes the global attributes.
Usage notes
The <sup> element should only be used for typographical reasons—that is, to change the position of the text to comply with typographical conventions or standards, rather than solely for presentation or appearance purposes.
For example, to style the wordmark of a business or product which uses a raised baseline should be done using CSS (most likely vertical-align ) rather than <sup> . This would be done using, for example, vertical-align: super or, to shift the baseline up 50%, vertical-align: 50% .
Appropriate use cases for <sup> include (but aren’t necessarily limited to):
- Displaying exponents, such as «x 3 .» It may be worth considering the use of MathML for these, especially in more complex cases. See Exponents under Examples below.
- Displaying superior lettering, which is used in some languages when rendering certain abbreviations. For example, in French, the word «mademoiselle» can be abbreviated «M lle «); this is an acceptable use case. See Superior lettering for examples.
- Representing ordinal numbers, such as «4 th » instead of «fourth.» See Ordinal numbers for examples.
Examples
Exponents
Exponents, or powers of a number, are among the most common uses of superscripted text. For example:
Result
Superior lettering
Superior lettering is not technically the same thing as superscript. However, it is common to use <sup> to present superior lettering in HTML. Among the most common uses of superior lettering is the presentation of certain abbreviations in French:
Result
Ordinal numbers
Ordinal numbers, such as «fourth» in English or «quinto» in Spanish may be abbreviated using numerals and language-specific text rendered in superscript:
HTML: <sup> tag
This HTML tutorial explains how to use the HTML element called the <sup> tag with syntax and examples.
Description
The HTML <sup> tag defines superscript text in an HTML document. For example, when dealing with an area value such as 36 ft 2 , the number 2 is rendered as superscript. This superscript text has a smaller font and appears with a raised baseline. This tag is also commonly referred to as the <sup> element.
Syntax
In HTML, the syntax for the <sup> tag is:
Sample Output
Attributes
Only the Global Attributes apply to the <sup> tag. There are no attributes that are specific to the <sup> tag.
- The HTML <sup> element is found within the <body> tag.
- The <sup> tag is used to comply with typographical standards or conventions.
- The <sup> tag is generally used to specify exponents such as m 2 and ordinal numbers such as 1 st , 2 nd or 3 rd .
Browser Compatibility
The <sup> tag has basic support with the following browsers:
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- Edge Mobile
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
Example
We will discuss the <sup> tag below, exploring examples of how to use the <sup> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.
- HTML5
- HTML4
- XHTML
HTML5 Document
If you created a new web page in HTML5, your <sup> tag might look like this:
In this HTML5 Document example, we have defined the "st" in 1 st as superscript text using a <sup> tag. This renders the letters "st" in 1 st as smaller text that is a half of a character in height higher than the other text.
HTML 4.01 Transitional Document
If you created a new web page in HTML 4.01 Transitional, your <sup> tag might look like this:
In this HTML 4.01 Transitional Document example, we have defined the "st" in 1 st as superscript text using a <sup> tag. This renders the letters "st" in 1 st as smaller text that is a half of a character in height higher than the other text.
XHTML 1.0 Transitional Document
If you created a new web page in XHTML 1.0 Transitional, your <sup> tag might look like this:
In this XHTML 1.0 Transitional Document example, we have defined the "st" in 1 st as superscript text using a <sup> tag. This renders the letters "st" in 1 st as smaller text that is a half of a character in height higher than the other text.
XHTML 1.0 Strict Document
If you created a new web page in XHTML 1.0 Strict, your <sup> tag might look like this:
In this XHTML 1.0 Strict Document example, we have defined the "st" in 1 st as superscript text using a <sup> tag. This renders the letters "st" in 1 st as smaller text that is a half of a character in height higher than the other text.
XHTML 1.1 Document
If you created a new web page in XHTML 1.1, your <sup> tag might look like this:
In this XHTML 1.1 Document example, we have defined the "st" in 1 st as superscript text using a <sup> tag. This renders the letters "st" in 1 st as smaller text that is a half of a character in height higher than the other text.
HTML <sup> tag
The <sup> tag is used to define a superscript text, which appears half a character above the regular line and is rendered smaller than the rest of the text. The tag is commonly used to define footnotes and formulas.
You must use the <sup> tag only for typographical reasons. It shouldn’t be used for styling purposes. If you want to change the vertical position of a text, you can use the CSS vertical-align property with the «super» value.
Here are some use cases for a <sup> element:
- Representing superior lettering used in some languages when rendering specific abbreviations.
- Representing exponents (e.g. «x 2 .»).
- Representing ordinal numbers (e.g. «5 th » instead of «fifth»).
Syntax
The <sup> tag comes in pairs. The content is written between the opening (<sup>) and closing (</sup>) tags.
Тег <sup> HTML верхний индекс
Тег <sup> в HTML используется для написания текста в виде верхнего индекса.
Текст внутри HTML тега <sup> будет выведен выше обычного текста строки, может иметь меньший размер шрифта.
Текст также можно писать в виде нижнего индекса. Для этого используйте тег <sub> .
Все виды выделения текста описаны в статье: Теги форматирования текста в HTML.