{"id":18936,"date":"2020-12-17T15:53:46","date_gmt":"2020-12-17T23:53:46","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=18936"},"modified":"2020-12-18T00:22:00","modified_gmt":"2020-12-18T08:22:00","slug":"html-superscript-subscript","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/html-superscript-subscript\/","title":{"rendered":"HTML Superscript and Subscript Text And When to Use It"},"content":{"rendered":"\n

The HTML <sup> tag specifies superscript text. This is text that appears at the top of a line of text. The <sub> tag represents subscript text. This is text that appears at the bottom of a line of text.<\/em><\/p>\n\n\n\n

Most of the time when we encounter text, it has a traditional baseline and x-height.<\/p>\n\n\n\n

Everything in this text up to this point in this article has a baseline. This baseline is basically the point where an underline would show up if we formatted it with a one, and an x-height. The x-height is the imaginary line where a lowercase letter ends. It gets its name from lowercase x since it fills the space.<\/p>\n\n\n\n

In this guide, we’re going to talk about how to define subscript and superscript in HTML. We’ll walk through an example of each of these text formatting topics so you can learn to use them in your code.<\/p>\n\n\n\n

When is Superscript and Subscript Text Used?<\/h2>\n\n\n\n

There are times when we would like to use characters that are a half a character below or above the set text. Subscripts are characters that are set half a character below the text. Superscripts are characters that are set half a character above the text.<\/p>\n\n\n\n

In a real-world setting, we use these characters when we\u2019re using math equations, chemical equations, citations or footnotes, for example.<\/p>\n\n\n\n

HTML Supertext<\/h2>\n\n\n\n

To make super text in HTML, use the <sup> tag. This tag raises any text enclosed within to the top of the line. The sup tag does not have any tag-specific attributes.<\/p>\n\n\n\n

Let’s take a look at the syntax for this method:<\/p>\n\n\n\n

<p>4 <sup>2<\/sup> = 16<\/p><\/pre><\/div>\n\n\n\n
We have enclosed the “2” character within <sup> tags. This makes the “2” appear in superscript. Our code now shows:<\/p>\n\n\n\n
4 \u00b2 = 16<\/p>\n\n\n\n
HTML Subtext<\/h2>\n\n\n\n
The HTML <sub> command defines subtext. Subtext refers to text that appears toward the bottom of a line of text.<\/p>\n\n\n\n
Consider this syntax:<\/p>\n\n\n\n
<p>This is main text. <sub>3<\/sub><\/p><\/pre><\/div>\n\n\n\n
Our code returns:<\/p>\n\n\n\n
This is main text. \u2083<\/p>\n\n\n\n
Like in the super text example, we have not specified any tag attributes for <sub>. To move text into subtext, we enclose that text within a <sub> tag.<\/p>\n\n\n\n
Subtext is often used to describe element numbers on the periodic table of elements.<\/p>\n\n\n\n
HTML Subtext and Supertext Example<\/h2>\n\n\n\n
Let’s walk through an example of both <sub> and <sup> on an HTML web page. Consider the following code:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n<style>\n \n<\/style>\n   <meta charset="UTF-8">\n   <meta name="viewport" content="width=device-width, initial-scale=1.0">\n   <title>Superscript and Subscript<\/title>\n   <style>\n       sub {\n           vertical-align: sub;\n           font-size: smaller;\n       }\n       sup {\n           vertical-align: super;\n           font: smaller;\n       }\n   <\/style>\n<\/head>\n<body>\n   <div style="text-align:center;" class="container">\n       <div>\n           <h3>Superscript<\/h3>\n           <span>E=MC<sup>2<\/sup><\/span>\n           <br \/>\n           <span>1.7 x 10<sup>4<\/sup><\/span>\n       <\/div>\n       <div>\n           <h3>Subscript<\/h3>\n           <span>H<sub>2<\/sub>O<\/span>\n           <br \/>\n           <span><sup>\u20201<\/sup>Ipsum, Lorem. Footnote example, 2020.<\/span>\n       <\/div>\n   <\/div>\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n\n
As you can see, we use <sub><\/em> and <sup><\/em> subscript tags and superscript tags to create the effect on the <span><\/em> HTML element. It comes with some default values:<\/p>\n\n\n\n
<style>\n       sub {\n           vertical-align: sub;\n           font-size: smaller;\n       }\n       sup {\n           vertical-align: super;\n           font: smaller;\n       }\n<\/style>\n<\/pre><\/div>\n\n\n\n
Both tags use event and global attributes that are available to us in HTML. Basically this means that you can set an event handler on it if someone were to click on the text.<\/p>\n\n\n\n
In addition, you can use any of the regular HTML attributes to customize the elements. You can find a list of the regular HTML attributes available to us in the Global Attributes list<\/a> written by W3Schools.<\/p>\n\n\n\n