150 Days of HTML

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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<p><small>Hello, I’m Mr. Potato Head</small></p>

<p>
  <img
    src="https://jarroldcdn.azureedge.net/products/hasbro/hasbro_playskool_mr_potato_%7Bw=1000,h=1000%7D.jpg"
    width="250"
    height="250"
    alt="Mr. Potato Head with a black hat, pink ears, eyes, a red nose, mouth with mustache, arms, and legs"
  />
</p>
<p>
  <small
    >All accessories sold separately. Essentially, you are buying a
    potato.</small
  >
</p>

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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<p>
  The <code>samp</code> element
  <small
    >(Not to be confused with the
    <a href="https://en.wikipedia.org/wiki/Samp"
      >African food of the same name</a
    >)</small
  >
</p>
<p>
  Buy yourself some
  <a href="https://www.pnp.co.za/">samp and beans - R18.99</a>
  <small>(includes 15% VAT)</small>
</p>

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:

1
2
3
4
5
6
7
<p>
  <small
    ><strong
      >By continuing to use the page you accept our terms of service.</strong
    ></small
  >
</p>

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:

1
<p>The formula for water is <var>H</var><sub>2</sub><var>O</var></p>

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.

1
<p><var>E</var> = <var>m</var><var>c</var><sup>2</sup></p>

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.

Buy me a coffee and support the work on 150 Days of HTML.