Superscript and Subscript
In the olden days, the sup
and sub
tags were used to present something in superscript (text above the line) or subscript (text below the line) but in this modern day and age we leave presentation up to CSS.
You could just use the CSS property vertical-align
with the value super
or sub
or even a length to achieve rudimentary superscript and subscript, but the problem with this is that, in a paragraph, those lines with superscript or subscript text will alter the height of that line, resulting in an inconsistently spaced paragraph.

The way to get around this problem is to latch on to the portions we want to be either superscript or subscript and gently nudge them upwards or downwards (as well as making them a little smaller, as is the usual convention).
Step 1: The HTML
Let’s start by latching on to the relevant text:
<p>H<span class="atoms">2</span>SO<span class="atoms">4</span> is the chemical formula for sulphuric acid.
But how is this gold Au<span class="charge">2+</span>?</p>
Step 2: Vertically aligning
Now, to achieve the desired effect we can use the following CSS:
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;
}
Whereas vertical-align
will mess about with the line-height (try changing the line-height
of the paragraph to 1
and replacing bottom: 0.5em
with vertical-align: 0.5em
), simply pushing the required elements up or down a bit with top or bottom makes things much easier and neater.