We recently examined
<b>, presentational HTML4 elements that have been given a new lease on semantic life. Two more elements that have undergone transmogrification to receive semantics in HTML5 are
<small>— was for smaller text, now used for side comments and small print (W3C:Markup, WHATWG)
<hr>— was horizontal rule, now used for a paragraph-level thematic break in text (W3C:Markup, WHATWG)
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
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, While not widely used these days (given the dull default browser renderings), it can be replaced via CSS with an image:
<hr> now separates different topics within a section of prose, or between scenes in a novel.
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.
When HTML4 was released, the presentational elements
<u> were already deprecated in favour of CSS. HTML5 completes this by removing
The remaining HTML4 presentational elements — the long-ignored
<hr> elements (along with
<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!