Есть ли семантический способ сделать акцент на тексте с помощью HTML и CSS?

Question

То, как я обычно делаю это в HTML (5), будет выглядеть так:

/* 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>

Моя проблема в том, чтобы сделать это таким образом: мне кажется, что 90% текста в параграфе уделяется больше внимания, что мне кажется нелогичным. Мне кажется, что было бы более семантическим, чтобы обернуть только текст, который является ненормальным в абзаце, который в данном случае является более легким текстом и оставить footer p {font-weight:bold}.

Является ли <small> подходящим элементом здесь, даже если это не совсем юридическая оговорка и т. Д.

Answer 1

Да, в вашем случае <small> является подходящим элементом, хотя он не «снимает выделение» с текста.

Строки из текущих спецификаций HTML:

ПримечаниеМелкий шрифт обычно содержит заявления об отказе от ответственности, предостережения, юридические ограничения или авторские права.Мелкий шрифт также иногда используется для атрибуции или для удовлетворения требований лицензирования.

Примечание: мелкий элемент не «не подчеркивает» и не снижает важность текста, выделенного элементом em или помеченного как важный с помощьюсильный элементЧтобы пометить текст как не выделенный или важный, просто не помечайте его элементами em или strong соответственно.

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

Answer 2

Обычный цвет шрифта черный (# 000).При корректировке цвета до более светлой версии фрагмент текста будет не акцентироваться.

Strong - это тег для выделения текста, поэтому я бы предложил вместо него использовать <small>.

footer small {
    color: #999;
}

Результат: http://jsfiddle.net/rzHgW/