HTML Superscript and Subscript Tag

HTML, or Hypertext Markup Language, is the standard language used for creating websites. One of the essential elements of HTML is text formatting, and HTML provides several tags to format text. In this article, we will discuss the superscript and subscript tags, which are used to raise or lower text, respectively. We will also provide examples and output to demonstrate how to use these tags.

Superscript Tag

The superscript tag is used to raise text, and it is written as <sup>. Here is an example of how to use the superscript tag:

1<!DOCTYPE html>
2<html>
3  <head>
4    <title>My Website</title>
5  </head>
6  <body>
7    <p>This is an example of <sup>superscript text</sup>.</p>
8  </body>
9</html>

Output:

This is an example of superscript text.

In this example, we have used the superscript tag to raise text. We have wrapped the text "superscript text" in a <sup> tag. When we view this HTML in a web browser, we will see the text "superscript text" displayed in a smaller font size and raised above the baseline.

Subscript Tag

The subscript tag is used to lower text, and it is written as <sub>. Here is an example of how to use the subscript tag:

1<!DOCTYPE html>
2<html>
3  <head>
4    <title>My Website</title>
5  </head>
6  <body>
7    <p>This is an example of <sub>subscript text</sub>.</p>
8  </body>
9</html>

Output:

This is an example of subscript text.

In this example, we have used the subscript tag to lower text. We have wrapped the text "subscript text" in a <sub> tag. When we view this HTML in a web browser, we will see the text "subscript text" displayed in a smaller font size and lowered below the baseline.

Combining Superscript and Subscript Tags

It is also possible to combine the superscript and subscript tags to make text both raised and lowered. Here is an example of how to combine the two tags:

1<!DOCTYPE html>
2<html>
3  <head>
4    <title>My Website</title>
5  </head>
6  <body>
7    <h1>Welcome to my website</h1>
8    <p>This is an example of <sup>superscript</sup> and <sub>subscript</sub> text.</p>
9  </body>
10</html>

In this example, we have used both the superscript and subscript tags to raise and lower text. We have wrapped the text "superscript" in a <sup> tag and the text "subscript" in a <sub> tag. When we view this HTML in a web browser, we will see the text "superscript" displayed in a smaller font size and raised above the baseline, and the text "subscript" displayed in a smaller font size and lowered below the baseline.