Read the Fine Print. It's become an art form in American society. Legal disclaimers, copyright notices, terms and conditions, privacy notifications, and so much more. It's all of those sticky details that must be disclosed, but companies like to keep hidden.
Those disclaimers and details are printed in tiny type to minimize printing costs and discourage detailed reading. We can do the same on the web!
A brief history of <small>
Back in the Dark Days Before CSS, <small> was used for... small text! As in, text that's not big. That was for the <big> element, of course.
โ๏ธ Then we got wise, separated presentation from markup, and <small> was tossed in the great ๐ Dustbin of Frowned-Upon Elements ๐ for several years during HTML4 and XHTML 1.0.
โ HTML5 brought back <small> with its new meaning, while it deprecated <big>. In the new definition, <small> is the fine print. As MDN says, copyright, legal text, and side-comments are all candidates for <small>.
When to use <small>
โ If it's a brief passage of "fine print," as an exception to the rest of the page's content, <small> is a great choice.
<p><small>© 2021 by me. All rights reserved, baby.</small></p>
โ๏ธ If it's an extended passage of fine print, like the pages containing the full privacy policy, terms and conditions, or other disclaimers of use, don't repeat <small> over and over again. On those pages, the fine print is the focus of the page, not the exception to it.
โ <small> may also be used to indicate limitations on an offer.
<p>Today only: $10 off your purchase! <small>must purchase $1000 or more</small></p>
Common misconceptions about <small>
โ๏ธ WHATWG cautions against using <small> as the "opposite" of strongly emphasized (<strong>) or emphasized (<em>) text:
Theย smallย element does not "de-emphasize" or lower the importance of text emphasized by theย emย element or marked as important with theย strongย element. To mark text as not emphasized or important, simply do not mark it up with theย emย orย strongย elements respectively.
๐โ ๏ธ Finally, always ask yourself if you're using <small> for styling or if you're using it to convey specific meaning. If it's styling, use CSS. ๐ โ ๏ธ
A <small> demo
๐ฅย View aย <small> demo on CodePen.
A <small> quiz
๐งฉ <small> is too small for a code challenge today, so we have a <small> quiz for you instead. Itโs one question long and takes 2 minutes to complete.
Feeling โbehind?โ
Thereโs no โbehind.โ Work at your own pace through the code challenges and quizzes as you can. Donโt let this newsletter stress you out, especially in a world where there are so many other things causing stress.
More information and examples
๐ย MDN: <small>
๐ย WHATWG: <small>
Thanks. I needed a small topic as I am way behind in lots of things. Glad I gave it a try tonight.