Search code examples
htmlsemantic-markup

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

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?

Solution

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

    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>