HTML: Subscript and Superscript Tags

Author: Ronald S. Holland
at
Total Application Works




To contact us



HOME] Consulting Design Maintenance Project Testing Training Turnkey Java C++ SQL HTML JavaScript ]

© 2002 - 2013 All Rights Reserved Total Application Works


    Tell a friend about this site (copy and paste the following HTML page into a file (e.g., using Notepad).)
    <html>
    <head>
    <title>Example of a link </title>
    </head>
    <body>
    <a href="http://sumtotalz.com/TotalAppsWorks/HTML/Div.html">
    Table Tags </a>
    </table>
    </body>
    </html>


Introduction

The purpose of this tutorial is to show you how to write a HTML page, using subscripts and superscript tags. What is HTML (HyperText Markup Language)? HTML is a layout/tag language that is used to organize text and/or images on a web page. In the following example, we will show you the code for our HTML page, using subscript and superscript.

What is a subscript?

A subscript is offset a little lower than the line text in which it is found, e.g., H2O. This is subscript

What is a superscript?

Superscript is text which is offset a little higher than neighboring text. It is a character that is half the height of a normal character and printed at the top middle of the normal characters. See Figure 1 for an example.



<html>
<body>
</body>

This text contains <sub>subscript</sub>.

This text contains an example of 2 raised to the power of 3: 2<sup>2</sup> = 8.

</html>
<html>
<body>
</body>

This text contains <sub>subscript</sub>.

This text contains an example of 2 raised to the power of 3: 23 = 8. </html>
Figure 1: HTML Example of a blank page


  1. <html> - indicates the beginning of the HTML page
  2. <body> - indicates the beginning of what will be displayed on the user's screen
  3. <sub> - is the beginning of the text that will be subscripted
  4. </sub> - is the end of the text that will subscripted
  5. <sup> - is the beginning of the text that will superscripted
  6. </sup> - is the end of the text that will be superscripted
  7. </body> - indicates the end of what will be displayed on the user's screen
  8. </html> - indicates the end of the HTML page

An example of a more robust web page looks like:

<html>
<head>
<title>
This an example of a more robust web page </title>
</head>
<body>
<p>This text contains <sub>subscript</sub>.
<ol>
<li>H<sub>2</sub>0 - Water
<li>O<sub>2</sub> - Oxygen
<li>CO<sub>2</sub> - Carbon Dioxide
</ol>
This text contains an example of 2 raised to the power of 3:
23 = 8.
Other examples are:
<ol>
<li>3<sup>2</sup> + 4<sup>2</sup> = 5<sup>2</sup>
<li>Friday the 13<sup>th</sup>
<li>The 5<sup>th</sup> word is ...
</ol>
</body>

</html>
This an example of a more robust web page

This text contains subscript.

  1. H20 - Water
  2. O2 - Oxygen
  3. CO2 - Carbon Dioxide
This text contains an example of 2 raised to the power of 3: 23 = 8. Other examples are:
  1. 32 + 42 = 52
  2. Friday the 13th
  3. The 5th word is ...
Figure 2: HTML examples using subscript and superscript


  1. <html> - indicates the beginning of the HTML page
  2. <head> - Contains information about the page such as the TITLE, META tags for proper Search Engine indexing, STYLE tags, which determine the page layout, and JavaScript coding for special effects.
  3. <title> - he TITLE of your page. This will be visible in the title bar of the viewers’ browser.
  4. </title> - Ends the HTML <TITLE> tag.
  5. </head> - Ends the HTML <head> tag.
  6. <body> - indicates the beginning of what will be displayed on the user's screen
  7. <sub> - is the beginning of the text that will be subscripted
  8. </sub> - is the end of the text that will subscripted
  9. <sup> - is the beginning of the text that will superscripted
  10. </sup> - is the end of the text that will be superscripted
  11. </body> - indicates the end of what will be displayed on the user's screen
  12. </html> - indicates the end of the HTML page

Feel free to copy and paste the code in the above Figures into a source file.

Standard Attributes

The <sub> and <sup> tags support the following standard attributes:

Attribute Value Description
class classname Specifies a classname for an element
dir rtl
ltr
Specifies the text direction for the content in an element
id id Specifies a unique id for an element
langlanguage_codeSpecifies a language code for the content in an element
style style_definition Specifies an inline style for an element
title text Specifies extra information about an element
xml:lang language_code Specifies a language code for the content in an element, in XHTML documents

Event Attributes

The <sub> and <sup> tags support the following event attributes:

Attribute Value Description
onclick script Script to be run on a mouse click
ondblclick script Script to be run on a mouse double-click
onmousedown script Script to be run when mouse button is pressed
onmousemove script Script to be run when mouse pointer moves
onmouseout script Script to be run when mouse pointer moves out of an element
onmouseover script Script to be run when mouse pointer moves over an element
onmouseup script Script to be run when mouse button is released
onkeydown script Script to be run when a key is pressed
onkeypress script Script to be run when a key is pressed and released
onkeyup script Script to be run when a key is released









HOME] Consulting Design Maintenance Project Testing Training Turnkey Java C++ SQL HTML JavaScript ]


To contact us

© 2002 - 2013 All Rights Reserved Total Application Works