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

Question

As I would normally do this in HTML (5), it 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 this is that it seems that 90% of the text in the paragraph matters more, which seems intuitive to me. It seems to me that I am more semantic to wrap text abnormal in a paragraph, which in this case is a lighter text text and leave footer p {font-weight:bold} .

<small> suitable element here, even if it is not valid for legal disclaimer, etc.

Answer 1

Yes, in your case, <small> is a suitable element, although it does not “underline” the text.

Lines from the current html specifications:

Note. Small prints usually indicate disclaimers, disclaimers, legal restrictions, or copyrights. Small stamps are also sometimes used for attribution or to satisfy licensing requirements.

Note. A small element does not de-emphasize or diminish the meaning of the text underlined by the em element, or designated as important with a strong element. To mark text as underlined or important, simply do not highlight them with em or strong elements, respectively.

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

Answer 2

The regular font color is black (# 000). When setting the color to a lighter version, a fragment of text will be highlighted.

Strong is a tag that emphasizes text, so I would suggest using <small> instead.

 footer small { color: #999; } 

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