In the original HTML 3.2 spec, <small> was a purely presentational element, the opposite to <big>: collectively, the tags literally made text smaller and larger.
Quite correctly, <big> was dropped from the HTML5 specification - its effect can be easily replicated by using font-size in CSS - but <small> was retained, and redefined to have a purpose.
<small> is used to demark fine print on a page. Possibilities include:
- copyright notices
- legal disclaimers
- licensing information
- footnotes
- side-comments
A typical example would wrap <small> text in a <footer> element:
<footer>
<small>Copyright © 2015 Soulless Corporation</small>
</footer>Semantically, <small> might be considered the inline equivalent of the <aside> element. Visually, <small> does what it has always done: it makes text one size smaller (large text becomes medium size, already small text becomes extra-small, etc), but that’s almost immaterial: text can be made to look however you want with CSS. <small> is about meaning, not appearance.
Small text should still be legible: it’s important to compensate smaller text with an improved contrast ratio and/or paying attention to line-height.
Photograph of writing on the stairwell of the Corean Pavilion by Costantino Beretta, licensed under Creative Commons
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
