How To Best Use Superscript Tag In HTML?

This article will help you explore simple yet an interesting concept that is Superscript Tag In HTML. Following pointers will be touched in this article:

• Superscript Tag in HTML
• Tags And Attributes in HTML
• Superscript

So let us get started with this article,

Superscript Tag in HTML

HTML is obviously the first thing what comes across the minds after listening the term Www. Basically, it’s the thing behind each and every website you visit today.

HTML alone can’t do the justice with some of the most-loved designs that we see today. It requires help and that is provided by CSS or Cascading Style Sheet. HTML & CSS can be used together to create some attractive web pages.

Moving on with this article on Superscript Tag in HTML

Tags & Attributes in HTML

These both are the basics of the HTML and they both work together but performs different functions.

Tags: Tags are used to mark up the start of the HTML element and is enclosed by the angular brackets.

Example: <h1>

The above tag is the heading tag in HTML.

Attributes: These are the additional information about the tags and are specified within the tag.

Example

<img src=”hello_world.jpg” alt=”My first program”>

The above tag is image tag <img> and alt is the attribute for the tag and provides the description for the image hello_world.jpg

As we have discussed the basics that we needed, so now we can move further with the motive of this article which is some advanced HTML and CSS tags.

Moving on with this article on Superscript Tag in HTML

Superscript

So, all of us has seen power to variables or numbers at many places and several times. That is exactly know as superscript, the value which is a bit elevated from the main text. For this purpose, we use the <sup> tag. The superscript value is enclosed in the <sup> tag.

Example: Suppose we need to write square of x in our webpage, then it would be done as follows.

<p> x ² </p>

GitHub Gist Link:

<script src=”https://gist.github.com/snehseel/f821842ad8b8c722c3d87dc60a1b657d.js”> </script>

Here <p> tag is used for the paragraph and the text within the <sup> tag would be superscripted and x2 would be shown on the webpage.

2 is superscripted to x.

The CSS element of the superscript tag would be as follows:

<style>
Sup
{
Vertical-align: super;
Font-size: smaller;
}
</style>

GitHub Gist Link:

<script src=”https://gist.github.com/snehseel/3b08860247a7dcc3fc9d6f509635cbe7.js”> </script>

Most browsers will display the superscript text <sup> with the above CSS along with the default value.

This brings us to the end of this article

Check out our Full Stack Web Developer Masters Program which comes with instructor-led live training and real-life project experience. This training makes you proficient in skills to work with back-end and front-end web technologies. It includes training on Web Development, jQuery, Angular, NodeJS, ExpressJS, and MongoDB.

Got a question for us? Please mention it in the comments section of  article and we will get back to you.