( ! ) Notice: Undefined variable: section in /var/www/cat/tutorials/html/subandsup.php on line 6
Call Stack
#TimeMemoryFunctionLocation
10.0007228704{main}( )../subandsup.php:0

The superscript element is my favorite way of demonstrating the basic syntax of HTML.

Take a look at Einstein's famous formula:

E=mc2

Notice anything wrong? The number (two) should be an exponent, but it's not. Exponents are usually indicated through a typographical element called a superscript -- putting the number up a little higher than the rest of the line.

Here's what it ought to look like:

E=mc2

So what's the difference? It's in the code:

E=mc<SUP>2</SUP>

The stuff in the pointy brackets is HTML code. These bits of code are usually referred to as tags. Web pages are full of tags, but you don't see them in your browser window. The tags supply formatting information for the other stuff -- the text that is not inside of pointy brackets.

Many elements of HTML follow the container model, and the superscript is no exception. There's an opening tag and a closing tag, and the stuff contained between the tags receives the special formatting.

In this case, the number (two) is enclosed between the <SUP> and </SUP> tags. Another way of putting it is that the tags delimit the superscript element, and the number (two) is the content of the element.

The result is that the browser renders the number (2) as superscript -- placing it a little bit higher than the rest of the line, and usually making it a bit smaller size than the surrounding text.

To make a subscript, use the <SUB> and </SUB> tags instead.

Subscripts and superscripts are inline elements.