Add Superscript Tag to Your Webpage
Working with Text
In this lesson, we will learn how to use the superscript tag in HTML.
What is Superscript Tag in HTML
The superscript tag is an HTML tag that is used to raise the text above the normal line height. It is often used to denote ordinal numbers (such as 1st, 2nd, 3rd, etc.), mathematical expressions, and trademark symbols in a document. The superscript tag is commonly used in scientific, mathematical, and technical documents.
The syntax for the superscript tag is straightforward. It requires an opening and closing superscript tag, and the text that needs to be raised above the normal line height is placed between these two tags.
Here's an example of how to use <sup> tag in HTML:
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Superscript Tag Example</title>
</head>
<body>
<p>Using the Superscript Tag for Ordinal Numbers</p>
<p>John finished 1<sup>st</sup> in the race.</p>
<p>Using the Superscript Tag for Mathematical Expressions</p>
<p>The area of a circle is π<sup>2</sup>.</p>
<p>Using the Superscript Tag for Trademark and Copyright Symbols</p>
<p>The iPhone<sup>©</sup> is a registered trademark of Apple Inc.</p>
</body>
</html>In the above example π and © are the entity codes of pie and copyright symbols respectively.
Attributes of Superscript Tag
Here are the attributes we can use with the superscript tag:
- id
- class
- style
- title
id
The id attribute is used to assign a unique name to an element on a web page. We can assign an id to the superscript tag and use it to apply a specific style to that particular tag.
Example
<p>X<sup id="stext">2</sup></p>In the above example, we assign an id attribute to the sup tag with a value stext. In CSS and JavaScript, we can use the name stext to access the specific sup tag whose id value is set to the name stext.
Note: The id attribute can be used on any tag to assign a unique tag name. It must be unique for each tag, meaning we can't use the same id name for another tag in an HTML document.
class
The class attribute is used to define a group of elements and to apply a specific style to that group. We can define a class for the superscript tags and use it to apply a specific style to all the superscript tags that belong to a particular class.
Example
<p>X<sup class="info">2</sup></p>
<p>Y<sup class="info">2</sup></p>In the above example, both sup tags have the same class name, info. If any CSS style is applied to the class name info, it will be applied on both sup tags.
Note: The class attribute can be used on any tag to assign a group name to the tag.
style
The style attribute can be used to apply inline css styles to the superscript tag. We will learn how to apply inline css style using the style attribute later in our CSS tutorial.
Example
<p>Z<sup style="color: red">2</sup></p>The style="color: red" will change the font color of the superscript tag to red.
title
The title attribute can be used to add a tooltip or additional information to the superscript tag, which will only appear when the user places the mouse cursor on the superscript text.
Example
<p>MC<sup title="Sqaure of C">2</sup></p>