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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/charset("`Character Encoding`") html/BasicStructureGroup -.-> html/lang_decl("`Language Declaration`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") subgraph Lab Skills html/basic_elems -.-> lab-70851{{"`HTML Superscript Text`"}} html/charset -.-> lab-70851{{"`HTML Superscript Text`"}} html/lang_decl -.-> lab-70851{{"`HTML Superscript Text`"}} html/head_elems -.-> lab-70851{{"`HTML Superscript Text`"}} html/text_head -.-> lab-70851{{"`HTML Superscript Text`"}} html/para_br -.-> lab-70851{{"`HTML Superscript Text`"}} end

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