Is there a semantic way to DEemphasize text with html & css?

Question

The way I normally would do this in HTML(5) would be like this:

/* CSS For this example */
footer p {
font-size: 16px;
font-weight: normal;
}

footer strong {
font-weight: bolder;
}

<!-- HTML for this example -->
<footer>
  <p>Title <strong>- Name. 1234 N. Main St., Anytown, USA</strong></p>
</footer>

My problem with doing it this way, is that it seems that 90% of the text in the paragraph is given greater importance, which seems counter intuitive to me. It would seem to me to be more semantic to only wrap the text that is abnormal in the paragraph, which in this case is the lighter weight text and leave footer p {font-weight:bold}.

Is <small> the appropriate element here even though its not really for a legal disclaimer, etc.

Answer 1

Yes, in your case <small> is appropriate element, although it does not "de-emphasize" text.

Lines from the current html specifications:

Note: Small print typically features disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution, or for satisfying licensing requirements.

Note: The small element does not "de-emphasize" or lower the importance of text emphasized by the em element or marked as important with the strong element. To mark text as not emphasized or important, simply do not mark it up with the em or strong elements respectively.

http://www.w3.org/TR/html5/text-level-semantics.html#the-small-element

Answer 2

The normal font color is black (#000). Adjusting the color, to a lighter version, will de-emphasize the text fragment.

Strong is a tag to emphasize text, so I'd suggest using <small> instead.

footer small {
    color: #999;
}

Result: http://jsfiddle.net/rzHgW/