HTML superscript and subscript tag explained

A superscript or subscript is a special text style that’s written with a smaller font and placed slightly above or below the normal line height. The purpose of the style is to distinguish these characters from others.

HTML allows you to create superscript and subscript texts by using the <sup> and <sub> tags.

HTML sup tag

Superscripts raise the text above the normal line and commonly used to mark a footnote in a paragraph.

The following HTML document:

<p>
  HTML5 is the latest version of HTML<sup>[1]</sup> released in 22 January 2008
</p>

Will result in the following text:

HTML5 is the latest version of HTML^[1] released in 22 January 2008

When you’re using the <sup> tag to create a footnote, you can put an <a> tag inside it:

<p>
  HTML5 is the latest version of HTML
  <sup><a href="https://google.com">[1]</a></sup>
  released in 22 January 2008
</p>

And that’s how you can use superscript. Let’s look at subscript next.

HTML sub tag

The HTML <sub> tag is used to create a subscript.

The following HTML example:

<p>
  Oxygen is commonly written as O<sub>2</sub> in chemical equations
</p>

Will produce the following text:

Oxygen is commonly written as O₂ in chemical equations

And that’s how the <sub> tag works.

You can combine both <sup> and <sub> tag to write fractional numbers as follows:

<p>
  3<sup>1</sup>/<sub>2</sub> plus 1<sup>1</sup>/<sub>2</sub> equals 5
</p>

The output of the markup above will be as shown below:

3¹/₂ plus 1¹/₂ equals 5

Now you’ve learned how to create superscript and subscript texts in HTML. Nice work 😉