<sup> HTML Tag

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Element of
Learn How Fonts And Web Typography Work In HTML: A Beginner's Guide
Display
inline
Usage
textual

Code Example

<p>Noting the presence of a footnote<sup><a href="#note1">1</a></sup> is one common way for superscripts to be used.</p>
<p><strong>Footnotes:</strong></p>
<p  id="note1"><sup>1</sup> A footnote is an explanatory comment placed at the bottom of a page and linked to from the location within the page where the information contained in the note applies.</p>

Noting the presence of a footnote1 is one common way for superscripts to be used.

Footnotes:

1 A footnote is an explanatory comment placed at the bottom of a page and linked to from the location within the page where the information contained in the note applies.

Superscripts are Super!

The <sup> script is used to identify text that should appear in a superscript position relative to the surrounding text. Use the element for it’s semantic meaning, rather than for it’s styling. If all you want to do is make a character appear superscript for stylistic purposes, CSS is the right tool for the job. Let’s take a look at how we might do that using this CSS snippet created by Ruthie BenDor with some light modification.

<style> .sup {   font-size: 75%;   line-height: 0;   position: relative;   vertical-align: baseline;   top: -0.5em } </style> <p>Use CSS for superscripts that are stylistic rather than textual, such as the superscripts in this completely fictional brand: Awesome<span class="sup">SQUARED</span>.</p> 

Let’s see what our browser does with that bit of HTML.

.sup{font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; top: -0.5em}

Use CSS for superscripts that are stylistic rather than textual, such as the superscripts in this completely fictional brand: AwesomeSQUARED.

Adam is a technical writer who specializes in developer documentation and tutorials.