title: Correct use of the <small> tag, or how to markup "less important" text
body: <p>Yet another tag that was given new meaning in HTML5, <code>&lt;small&gt;</code> apparently lives on:</p>
  
  <blockquote>
    <p><a href="http://www.w3.org/TR/html-markup/small.html#small" rel="noreferrer">http://www.w3.org/TR/html-markup/small.html#small</a></p>
    
    <p>The small element represents so-called “fine print” or “small print”,
    such as legal disclaimers and caveats.</p>
  </blockquote>
  
  <p>This unofficial reference seems to take it a little further:</p>
  
  <blockquote>
    <p><a href="http://html5doctor.com/small-hr-element/" rel="noreferrer">http://html5doctor.com/small-hr-element/</a></p>
    
    <p><code>&lt;small&gt;</code> is now for side comments, which are the inline equivalent of
    <code>&lt;aside&gt;</code> — 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.</p>
  </blockquote>
  
  <p>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:</p>
  
  <pre><code>&lt;li&gt;Laurence Tureaud &lt;small&gt;(Mr.T)&lt;/small&gt;&lt;/li&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/UibM5.png" alt="enter image description here"></p>
  
  <p>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 <code>&lt;span class="quiet"&gt;</code> or something like that, but I'm trying to avoid arbitrary class names and use the correct HTML element (if there is one).</p>
  
  <p>Is <code>&lt;small&gt;</code> appropriate for this, or is there another element or markup structure that would be appropriate?</p>