Superscript and subscript are used most notably in three specific areas: subscript is used in chemistry for displaying how many atoms are in each element; superscript is seen in the academic literary world where the number 1 is inserted into the document immediately next to the fact, concept, or quotation being cited; and superscript is found in mathematics for exponents.
For this tutorial, you will learn how to easily apply CSS styles to create the subscript and superscript effect. This tutorial will take advantage of CSS (Cascading Style Sheets) functions while creating the effect within the HTML (Hypertext Markup Language) page. Along the way, you will also be provided with some fun and creative design elements. All you need to start with is a simple code editor such as Notepad ++.
A Practical Application of Superscript
A Literary Application
As mentioned above, one of the places where superscript is often seen and recognized is in the literary world, more specifically in academic papers when multiple sources need to be listed. You can list sources using the superscript in either the footer of the page where you are quoting sources, or in an appendix of the document.
Note: Superscript usually has a font size that is smaller than the rest of the text and is placed slightly above the line.
Creating Superscript with CSS
Create a basic HTML document to start with.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>A sup element is displayed like this:</p>
<p>This text contains <sup>superscript text</sup></p>
<p>Change the default CSS settings to see the effect.</p>
</body>
</html>
Now add in the Superscript element <sup> to create the effect. You will want to define the <sup> element in the CSS by adding the vertical-align property as well as a designated font-size property to assure a professional-looking outcome.
Notice that with the vertical-align property, ”super” is being used to define the outcome of the <sup> element.
<!DOCTYPE html>
<html>
<head>
<style>
sup {
vertical-align: super;
font-size: smaller;
}
</style>
</head>
<body>
<p>A sup element is displayed like this:</p>
<p>Life exists in many forms <sup>1</sup></p>
<p>Change the default CSS settings to see the effect.</p>
</body>
</html>
In a browser you will see the following:
Note: In the appendix or the footer of your document, you would of course list out the full references using superscript numbers as well.
A Mathematical Application
In addition to a literary application, superscript is known for its appearance in mathematics to show exponents.
In example, five to the power of 3 can be shown using HTML and CSS in the same way it was used in the literary example.
<!DOCTYPE html>
<html>
<head>
<style>
sup {
vertical-align: super;
font-size: smaller;
}
</style>
</head>
<body>
<p>A sup element is displayed like this:</p>
<p>5<sup>3</sup>= 125.</p>
<p>Change the default CSS settings to see the effect.</p>
</body>
</html>
The result in a browser would look like this:
You could make the exponent a different color if you wanted it to stand out by simply applying a color to the CSS as follows:
<style>
sup {
color: blue;
vertical-align: super;
font-size: smaller;
}
</style>
This sets the exponent apart from the rest with the color change.
A Practical Application of Subscript
As with superscript, subscript is usually smaller than the rest of the text. And instead of being slightly above the line, subscript appears slightly below the baseline.
Now add in the subscript element <sub> to create the effect. You will want to define the <sub> element in the CSS by adding the vertical-align property as well as a designated font-size property to assure a professional-looking outcome.
For this illustration, the chemical formula for water will be displayed. You could simply display it as H2O, but to make this really look professional, you need to add the subscript.
The HTML will appear as follows:
<!DOCTYPE html>
<html>
<head>
<style>
sub {
vertical-align: sub;
font-size: smaller;
}
</style>
</head>
<body>
<p>A sub element is displayed like this:</p>
<p>The chemical formula for water is H<sub>2</sub>O</p>
<p>Change the default CSS settings to see the effect.</p>
</body>
</html>
In a browser you will see the following:
Final Note
Hopefully with this knowledge of superscript and subscript, you will be able to apply these effectively in the appropriate settings in the world of academia. Being able to create these in HTML and CSS will give you additional creative power to showcase your work on your web pages. Although the use of superscript and subscript may seem abstract, these elements are supported by most modern browsers.
Where to Next?
This “Utilizing CSS Superscript and Subscript “tutorial should provide a starting point for further inquiry into website design, layout, and practical applications with HTML and CSS.
Continue to explore other areas of design. The hope for this introduction is that it piques your interest, inspires you to explore further, and dive deeper into the world of web design.
HTML is a great way to start learning code, but the professional world demands more and more. Why not supercharge your skills and options by taking it even further. Enroll in our Intro to Programming Nanodegree program today!
