<sup>
Superscript: text raised and shrunk, for example exponents and footnote numbers.
- Display
- inline
- Closing tag
- Required
- Permitted content
- Phrasing content
Example
#<p>The room is 16 m<sup>2</sup>, and 2<sup>10</sup> = 1024, which is why a kibibyte has 1024 bytes.</p>Definition and usage
#The <sup> element marks a superscript: an exponent (2^10), units such as m², or a footnote number. Browsers raise and shrink such text.
Footnotes are usually linked both ways: the number in the text leads to the footnote’s content, and the footnote has a link back. That makes it easy to jump back and forth, including from the keyboard.
In English, ordinal suffixes are sometimes set as a superscript, as in 1<sup>st</sup> or 2<sup>nd</sup>, though plain text (1st, 2nd) is just as correct and more common in running prose. Just like <sub>, the element slightly increases the line height, which you can fix in CSS.
Syntax
#2<sup>10</sup>Attributes
#This element has no attributes of its own. It supports the global attributes, such as class, id and hidden.
More examples
#<p>The first version of JavaScript was written in 10 days<sup><a href="#note-1" id="ref-1">1</a></sup>.</p>
<p id="note-1">
<small>1. It was written by Brendan Eich, who worked at Netscape in 1995. <a href="#ref-1">Back to text</a></small>
</p>Default CSS
#Most browsers display this element with these default styles:
sup {
vertical-align: super;
font-size: smaller;
line-height: normal;
}Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Put the footnote number inside a link, and add a link back to the text in the footnote.
- If you use superscript ordinal suffixes (1st, 2nd), save them for short labels; in running prose, plain text is just as correct and easier to read.
- When superscripts push lines of text apart,
line-height: 0set onsuphelps.
Related entries
#- <sub>Subscript: text lowered and shrunk, for example in chemical formulas.
- <var>A variable in a math formula or a program, as well as a placeholder symbol in a command.
- <small>Fine print: disclaimers, legal notices, copyright, and short side notes.
- <a>A link to another page, a file, an email address, or a place on the same page.
Spotted a mistake or missing an example? Write to us.