Superscript Text: Elevate Your HTML Content

Introduction

The HTML sup tag allows you to display text in a superscript format on a webpage. In this lab, we will demonstrate how to use the sup tag to create superscript text.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

This is a Guided Lab, which provides step-by-step instructions to help you learn and practice. Follow the instructions carefully to complete each step and gain hands-on experience. Historical data shows that this is a beginner level lab with a 100% completion rate. It has received a 100% positive review rate from learners.

Setting up the HTML File

Create an HTML file named index.html and set up the basic HTML structure.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Superscript Text</title>
  </head>
  <body></body>
</html>

Adding Superscript Text

Add the sup tag to the HTML file. Within the opening and closing tags of the sup element, add the text that you want to display as superscript.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Superscript Text</title>
  </head>
  <body>
    <p>My email address is: user123<sup>@</sup>example<sup>.</sup>com</p>
  </body>
</html>

Styling the Superscript Text

You can style the sup tag using CSS to adjust its font size and vertical alignment. Add the following CSS code to your HTML file:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Superscript Text</title>
    <style>
      sup {
        font-size: smaller;
        vertical-align: super;
      }
    </style>
  </head>
  <body>
    <p>My email address is: user123<sup>@</sup>example<sup>.</sup>com</p>
  </body>
</html>

Adding Mathematical Notation

Superscript text is an important component of mathematical notation. You can use the sup tag to represent exponents and powers. For example, add the following code to your HTML file:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Superscript Text</title>
    <style>
      sup {
        font-size: smaller;
        vertical-align: super;
      }
    </style>
  </head>
  <body>
    <p>The value of 2<sup>3</sup> is 8.</p>
  </body>
</html>

Summary

In this lab, we learned about the sup tag in HTML. We saw how to create superscript text and use it to represent exponents and powers. We also learned how to style the sup tag using CSS. With the skills learned from this lab, you can now easily add superscript text to your HTML pages.

HTML Superscript Text