Correct use of the <small> tag, or how to markup "less important" text

Wesley Murch picture Wesley Murch · May 5, 2012 · Viewed 21.9k times · Source

Yet another tag that was given new meaning in HTML5, <small> apparently lives on:

http://www.w3.org/TR/html-markup/small.html#small

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

This unofficial reference seems to take it a little further:

http://html5doctor.com/small-hr-element/

<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.

I have a list of people I want to display, which includes their real name and nickname. The nickname is sort of an "aside", and I want to style it with lighter text:

<li>Laurence Tureaud <small>(Mr.T)</small></li>

enter image description here

I'll need to do something like this for several sections of the site (people, products, locations), so I'm trying to develop a sensible standard. I know I can use <span class="quiet"> or something like that, but I'm trying to avoid arbitrary class names and use the correct HTML element (if there is one).

Is <small> appropriate for this, or is there another element or markup structure that would be appropriate?

Answer

skyline26 picture skyline26 · May 5, 2012

The spec you're looking at is old, you should look at the HTML5 spec:

https://html.spec.whatwg.org/multipage/

I suggest <em> here instead of small:

<p>Laurence Tureaud also called <em>Mr. T</em> is famous for his role
in the tv series A-TEAM.</p>

<small> is not used commonly in an article sentence, but like this:

<footer>
    <p>
    Search articles about <a href="#">Laurence Tureaud</a>,
    <small>or try <a href="#">articles about A-TEAM</a>.</small>
    </p>
</footer>

<footer>
    <p>
    Call the Laurence Tureaud's "life trainer chat line" at
    555-1122334455 <small>($1.99 for 1 minute)</small>
    </p>
</footer>

Article sentence:

<p>
    My job is very interesting and I love it: I work in an office
    <small>(123 St. Rome, Italy)</small> with a lot of funny guys that share
    my exact interests.
</p>