HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Superscript and subscript</title>
<style>
body { font: 100% "Times New Roman", Times, serif }
p { line-height: 1.5 }
.charge {
position: relative;
bottom: 0.5em;
color: red;
font-size: 0.8em;
}
.atoms {
position: relative;
top: 0.3em;
color: blue;
font-size: 0.8em;
}
</style>
</head>
<body>
<p>My name is Doctor Womac and I am going to teach you all about chemical formulae. A chemical formula is a way to describe the chemical elements that make up a particular chemical compound. It consists of chemical symbols to covey the elements and numbers to show the number of atoms of each element. H<span class="atoms">2</span>SO<span class="atoms">4</span> is the chemical formula for sulphur for example. The charge of an ion can be displayed in superscript, such as Au<span class="charge">2+</span>. This concludes my lesson. I must rush off home now because I have a problem with some radioactive phosphate.</p>
<!-- Link back to HTML Dog: -->
<p><a href="http://www.htmldog.com/examples/"><img src="http://www.htmldog.com/badge1.gif" alt="HTML Dog"></a></p>
</body>
</html>