HTML & CSS: Superscript and Subscript

In recent tutorials we've been doing more CSS than HTML stuff, but it's important to remember that different elements are important for semantics and creating a solid structure. I try to introduce you to new tags as we go along (like we did with the heading elements, span, and blockquote), but this tutorial is going to be dedicated to two basic elements which can be super useful when writing content, especially if that content is scientific or mathematical.

The basic idea of the elements we're learning, are to write small text above regular text (like you'd see when writing indices in mathematics), and small text below regular text (like you'd see when writing element numbers in science).

So firstly, small text above regular text! This text is often referred to as superscript, and this is reflected in the element name – sup.

What's a brogrammers favourite element? Sup.

Joking aside, the sup element simply makes any text inside of it superscript (you can obviously adjust these styles if you so wish in the CSS). It behaves much like the span in that it's an inline element that you'll usually just wrap around a small amount of text. Something like 2² can be written as:

1

2<sup>2</sup>

Simple, right? Sometimes you see sup used for nested purposes too. Perhaps sups in spans (an inline element for strings of text) should be styled in some special way, in which case you might write something like the following in your CSS:

1
2
3

span sup {
	color: #666;
}

The other element we're going to cover in this tutorial functions very similarly. Small text that's below regular text is called subscript, and as you might expect this results in the HTML element sub. I don't have a bad joke for this one, but it's often used in scientific notation to express the number of a certain element present. Something like H₂O could be written as:

1

H<sub>2</sub>O

It's that simple. These elements are very simple and are a piece of cake compared to stuff like pseudo-elements that we've been doing recently, but they are brilliant for certain purposes, especially scientific/mathematical notation and certain nested usage, and thus this short and sweet tutorial exists.