#30DaysofHTML Day 8: <small>

It's in the fine print

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>&copy; 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>