<sup> HTML Tag
- 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.
Use CSS for superscripts that are stylistic rather than textual, such as the superscripts in this completely fictional brand: AwesomeSQUARED.
