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

html, semantic-markup

Solution

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>

Problem

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> ``` 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?

Original source