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,
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 –
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 22 can be written as:
Simple, right? Sometimes you see
sup used for nested purposes too. Perhaps
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
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 H2O could be written as:
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.