The <small> element

The small element represents so-called “small print” such as legal disclaimers and caveats.

<small> is now for side comments, which are the inline equivalent of <aside> — content which is not the main focus of the page. A common example is inline legalese, such as a copyright statement in a page footer, a disclaimer, or licensing information. It can also be used for attribution. Don’t use it for block-level content (paragraphs, lists, etc.), as this would be considered main content.

<small> text does not need to be smaller than surrounding text — if all you want is smaller text use CSS instead. Use <small> only on inline content. Finally, <small> doesn’t affect the semantics of <em> or <strong>.

The <hr> element

The hr element represents a paragraph-level thematic break.

The “paragraph-level” bit means between blocks of text, so it can’t be used to separate sections of a site. Instead, <hr> now separates different topics within a section of prose, or between scenes in a novel. After checking with Hixie I found I misinterpreted the paragraph content model (we regret the error!). I learned <hr> actually means end of one section, start of another, which is the same semantically as </section><section>. Because elements like <section> already indicate this intrinsically, <hr> is more for thematic breaks, such as separating different topics within a section of prose, or between scenes in a novel. However you can use it anywhere you can use a <p>. While not widely used these days (given the dull default browser renderings), it can be replaced via CSS with an image:

IE7 and lower live up to reputation by adding a border around the image regardless, but this can often be worked around. Alternatively you can just hide it via an IE7-and-lower stylesheet. Use a CSS border or background image on another element instead if the transition is obvious (for example between weblog comments), or the intended use is solely presentational.

In summary

When HTML4 was released, the presentational elements <basefont>, <font>, <s>, <strike>, and <u> were already deprecated in favour of CSS. HTML5 completes this by removing <big> and <tt>.

The remaining HTML4 presentational elements — the long-ignored <small> and <hr> elements (along with <i> and <b> from last week) — have been redefined in HTML5 with useful, media-independent semantics that relate to their typical use. Will you be using them? Let us know in the comments!