Chapter 26 | small
, sub
, and sup
Continuing with text-level semantics, this chapter is a quick one and covers small
, sub
, and sup
small
While the default font size of the contents of the small
element is, well small, it is not only meant for small print. It is definitely one of the use cases though.
|
|
Live Codepen - Using the small
element for small print
It can also be used for side notes. Here I am not referring to text that is displayed on the side like a pull quote for example, but something like in the following example:
|
|
Live Codepen - Using the small
element for a side note
The small
element is not meant for extended spans of text or for subheadings. When a em
or strong
element is nested within a small
element, it does not deemphasize or lessen the importance. So the following will still carry the same weight:
|
|
sub
The sub
element represents subscript. This element is not meant to be used for purely presentational purposes but, to mark up specific typographical conventions. For example:
|
|
Live Codepen - Using the sub
element
sup
The sup
element represents superscript. Basically sup
is our reality and sub
is the upside-down 🙃 (I could not resist the Stranger Things reference.). Let’s look at a familiar example from a previous chapter.
|
|
Live Codepen - Using the sup
element
That completes our look at the simple, but useful text-level semantic elements. In the next chapter we will look at some lesser-known elements under the text-level semantics flag.