В то время как многие элементы из HTML4 вошли в HTML5 без существенных изменений, некоторые исторически презентационные элементы обрели новую семантику.
Давайте посмотрим на <i> и <b> и сравним их с семантическими преемниками — <em> и <strong>. Что получается:
<i>— был просто курсивом, а сейчас обозначает дополнительное выделение (например, для иностранных слов, технических терминов) или просто курсивное начертание текста (W3C:Markup, WHATWG);<b>— просто выделял текст полужирным, а сейчас обозначает стилистическое усиление текста (например, для ключевых слов) или просто полужирное начертание (W3C:Markup, WHATWG);<em>— обозначал выделение, а сейчас обозначает экспрессивно-эмоциональное выделение, т.е. слово или фразу, произнесённые иначе (W3C:Markup, WHATWG);<strong>— обозначал большее усиление экспрессии, а сейчас обозначает высокую важность, что, в общем, почти то же самое (ещё большее усиление или важность сейчас определяется уровнем вложенности) (W3C:Markup, WHATWG).
Новая семантика презентационных элементовСкопировать ссылку
В HTML4 элементы <i> и <b> были презентационными. Они по-прежнему могут использоваться там, где этого требует типографская традиция. Тем не менее, теперь они обрели семантику и могут быть оформлены при помощи CSS, что делает их не только презентационными — элемент <b>, например, совсем не обязательно должен быть полужирным. Поэтому для обозначения смысловой нагрузки элементов рекомендуется использовать классы; это позволит легко изменить внешний вид элементов в дальнейшем.
Элемент <i>Скопировать ссылку
Элемент
<i>представляет собой фрагмент текста с дополнительным выделением или же экспрессивно-эмоциональным сдвигом относительно обычного текста (то, что обычно обозначается курсивом в типографике).
Обычно обозначаются курсивом: иностранные слова (с атрибутом lang), таксономия и технические термины, названия кораблей, пометки в сценариях, нотное письмо, вставки размышлений или рукописного текста. Пример:
<blockquote cite="http://www.trussel.com/bladerun.htm">
<ol class="script semantic-list">
<li>
<b class="character">Декард</b>:
Шевелись! Прочь с дороги!
</li>
<li class="action">
Декард стреляет и убивает Зору
в драматической замедленной сцене.
</li>
<li>
<b class="character">Декард</b>:
<i class="voiceover">В отчёте это будет выглядеть
рутинным устранением двойника, что, однако, совсем
не поможет мне чувствовать себя лучше после выстрела
женщине в спину. И снова. Жалость где-то внутри.
К ней, к Рэйчел.</i>
</li>
<li>
<b class="character">Декард</b>:
Декард. Б-263-54.
</li>
</ol>
</blockquote>
В указанном примере элемент <i class="voiceover"> используется для обозначения внутреннего диалога персонажа, произнесённого в другом тоне.
<blockquote>
<p>
Прошлой ночью мы ели
<i lang="ja-cyrl" title="угорь">унаги</i>,
<i lang="ja-cyrl" title="копчёный лосось">абури-заке</i> и
<i lang="ja-cyrl" title="осьминог">тако</i>, а все
<i lang="ja-cyrl" title="тунец">торо</i> суши кончились.
</p>
</blockquote>
Элемент <i lang="ja-cyrl"> используется в этом примере для обозначения «идиоматических фраз из другого языка» (японских слов). Полный список значений атрибута lang вы можете найти в официальном списке IANA; или же вы можете воспользоваться замечательным сервисом по поиску языковых обозначений от Ричарда Исиды из W3C.
<blockquote cite="https://en.wikipedia.org/wiki/Nanotyrannus">
<p>
<i class="taxonomy">Nanotyrannus</i> («карликовый тиран»)
принадлежит к семейству тираннозавров, и, возможно, является
юной особью <i class="taxonomy">тираннозавра</i>.
Его череп, ныне находящийся в КМЕ (Кливлендском Музее
естествознания), был найден Чарльзом Гилмором в 1942-м
году, описан им же в 1946-м. Гилмор обозначил его
как представителя нового вида
<i class="taxonomy">Gorgosaurus lancensis</i>.
</p>
</blockquote>
Элементом <i class="taxonomy"> в данном примере обозначается таксономическая единица.
Используйте <i> только в том случае, когда не удаётся найти ничего более подходящего: <em> для фрагментов с экспрессивно-эмоциональным выделением, <strong> для смысловой важности, <cite> для имён при цитировании или в библиографии, <dfn> для определений и <var> для математических переменных. Однако для придания курсивного начертания таким блокам текста, как ремарки, стихотворные строфы и цитаты, используйте CSS . Не забывайте использовать атрибут class для задания функциональной роли элемента — это позволит с легкостью переопределить стили в дальнейшем. К примеру, вы можете сделать выборку по атрибуту lang в CSS, используя селектор вида [lang="ja-cyrl"].
Элемент <b>Скопировать ссылку
Элемент
<b>представляет собой фрагмент текста, который выделяется из окружающего его контекста, но не передает никакого особого значения. Это, например, ключевые слова в выдержках, названия продуктов в обзорах или другие части текста, которые по правилам типографики обычно выделяются полужирным начертанием.
Для текста, обрамленного в <b> (который должен просто отличаться от основного), нет необходимости использовать font-style: bold — можно обратиться к другим стилям: скруглённому фону, большему размеру шрифта, другому цвет или особому форматированию типа капители. К примеру, в приведенном выше отрывке, <b class="character"> используется для указания на того, кто говорит или рассказывает.
Текст, который набран полужирным по типографским соглашениям (а совсем не потому, что он более важен) может использоваться для выделения имён в голливудских сплетнях или в качестве вводного текста для сложных или оформленных в классическом стиле текстов:
<p class="sub-versal">
<b class="opening-phrase">Было около часу</b>,
когда Шерлок Холмс вернулся с прогулки.
Он держал в руках листок голубой бумаги,
исчирканный заметками и рисунками.
</p>
В данном примере буквица соединяется с текстом при помощи <b class="opening-phrase">. Для ее создания используется псевдоэлемент ::first-letter. В этом случае открывающая фраза выделена полужирным только из оформительских соображений, но если бы этот фрагмент был семантически важен, то <strong> или другой подобный элемент подошли бы лучше.
<p class="versal">
Просматривая свои записи о приключениях Шерлока Холмса —
а таких записей, которые я вел на протяжении последних восьми
лет, у меня больше семидесяти — я нахожу в них немало
трагических случаев, есть среди них и забавные, есть
и причудливые, но нет ни одного заурядного.
</p>
Несмотря на то, что мы можем использовать <b> для традиционного типографического оформления вроде выделения капителью первого слова, фразы или предложения, псевдоэлемент :first-line больше подходит для таких целей. Например, все первые абзацы HTML5Doctor.com оформлены при помощи элегантного :first-of-type.
Используйте <b> только тогда, когда нет ничего более подходящего, например: <strong> для текста с семантической важностью, <em> для акцентированного текста (с «логическим ударением»), элементы от <h1> до <h6> для заголовков и <mark> для подсвеченного или выделенного текста. Для облака тегов используйте список с соответствующими классами. Для воссоздания традиционных типографских приёмов используйте CSS-селекторы псевдоэлементов: :first-line и :first-letter, каждый для своего случая. И ещё раз, не забывайте использовать атрибут class для обозначения того, зачем был использован каждый конкретный элемент — это упростит повторное изменение элемента в дальнейшем.
…и для сравнения: элементы <em> и <strong>Скопировать ссылку
Хотя <em> и <strong> остались практически такими же, как были, в их значении всё же произошли некоторые изменения. В HTML4 они означали «акцент» и «сильный акцент». Сейчас их значение несколько видоизменилось: <em> обозначает экспрессивно-эмоциональное выделение (т.е. нечто, произнесённое иначе), а <strong> обозначает важность.
Элемент <em>Скопировать ссылку
Элемент
<em>обозначает часть текста с эмфатическим ударением.
Термин «ударение» имеет отношение к лингвистике. Ударение изменяет эмоциональную окраску слова, что, в свою очередь, может изменить смысл предложения. Например, фраза «Быстро позови доктора!» акцентирует важность того, чтобы позвали именно доктора — возможно, в ответ на чей-то вопрос «Мне позвать сестру?» Напротив, фраза «Быстро позови доктора!» акцентирует важность немедленного вызова.
Используйте <strong> в других случаях для обозначения важности и <i> для курсивного начертания без эмоциональной окраски. Уровень вложенности обозначает силу акцентирования.
Элемент <strong>Скопировать ссылку
Элемент
<strong>обозначает часть текста с высокой важностью.
Добавить, в общем-то, и нечего — элемент <strong> хорошо всем нам знаком. Используйте вложенные элементы <strong> для обозначения относительной важности, <em> для эмфатического ударения и <b> для стилистически выделенных или просто полужирных фрагментов текста без подчёркнутой важности.
Резюмируя…Скопировать ссылку
И последнее: все эти элементы (как и большинство HTML5-элементов) намеренно были сделаны медиа-независимыми, т.е. их семантика теперь не привязана к отображению в визуальных браузерах.
Что же мы имеем? Две презентационных дворняжки из HTML4 превратились в полноценные, насыщенные смыслом HTML5-элементы, готовые снова вернуться в ваш код. Сможете ли вы устоять перед их блестящими, полными семантики щенячьими глазками? Дайте нам знать!
