HTML5 <sup> Tag

The HTML <sup> tag is used to define a span of text that should be displayed, for typographic reasons, higher, and often smaller, than the main span of text.

This text is superscripted. The only content permitted inside this element is phrasing content. Both the starting and ending tag are mandatory for this element. The parent of the <sup> tag can be any element that can contain phrasing content.

This element should be used for typographical reasons only, i.e. changing the position of the text changing its meaning like in mathematical function etc.

The following style is applied to this element by default:

sup {
  vertical-align: super;
  font-size: smaller;
}

In certain languages, superscripts are part of the typographical conventions for some abbreviations. This is shown in the first example below.

Here are some example of using this tag:

<p>The most beautiful women are
  <span lang="fr"><abbr>M<sup>lle</sup></abbr> Gwendoline</span> and
  <span lang="fr"><abbr>M<sup>me</sup></abbr> Denise</span>.</p>

<var>E</var>=<var>m</var><var>c</var><sup>2</sup>   
f(<var>x</var>, <var>n</var>) = log<sub>4</sub><var>x</var><sup><var>n</var></sup>

Attributes

This element only accepts global attributes.

Examples

See the Pen HTML sup Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <sup> element on MDN.
  2. You can also read the HTML <sup> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top