Элементы i, b, em и strong

Оли Стадхольм 13 июля 2010

В то время как многие элементы из 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> представляет собой фрагмент текста с дополнительным выделением или же экспрессивно-эмоциональным сдвигом относительно обычного текста (то, что обычно обозначается курсивом в типографике)

Спецификация W3C

Обычно обозначаются курсивом: иностранные слова (с атрибутом 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="http://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> представляет собой фрагмент текста, который выделяется из окружающего его контекста, но не передает никакого особого значения. Это, например, ключевые слова в выдержках, названия продуктов в обзорах или другие части текста, которые по правилам типографики обычно выделяются полужирным начертанием.

Спецификация W3C

Для текста, обрамленного в <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> обозначает часть текста с эмфатическим ударением.

Спецификация W3C

Термин «ударение» имеет отношение к лингвистике. Ударение изменяет эмоциональную окраску слова, что, в свою очередь, может изменить смысл предложения. Например, фраза «Быстро позови доктора!» акцентирует важность того, чтобы позвали именно доктора — возможно, в ответ на чей-то вопрос «Мне позвать сестру?» Напротив, фраза «Быстро позови доктора!» акцентирует важность немедленного вызова.

Используйте <strong> в других случаях для обозначения важности и <i> для курсивного начертания без эмоциональной окраски. Уровень вложенности обозначает силу акцентирования.

Элемент <strong>

Элемент <strong> обозначает часть текста с высокой важностью.

Спецификация W3C

Добавить, в общем-то, и нечего — элемент <strong> хорошо всем нам знаком. Используйте вложенные элементы <strong> для обозначения относительной важности, <em> для эмафтического ударения и <b> для стилистически выделенных или просто полужирных фрагментов текста без подчёкнутой важности.

Резюмируя...

И последнее: все эти элементы (как и большинство HTML5-элементов) намеренно были сделаны медиа-независимыми, т.е. их семантика теперь не привязана к отображению в визуальных браузерах.

Что же мы имеем? Две презентационных дворняжки из HTML4 превратились в полноценные, насыщенные смыслом HTML5-элементы, готовые снова вернуться в ваш код. Сможете ли вы устоять перед их блестящими, полными семантики щенячьими глазками? Дайте нам знать!

Перевод оригинальной статьи «The i, b, em, & strong elements» Оли Стадхольма (Oli Studholme), опубликованной на сайте HTML5Doctor.com.

Теги: , ,

Комментарии +

  1. fiskus_boulder 13 июля 2010 в 17:28

    по-моему, можно легко перепутать предназначение <b> и <mark>

  2. sunnybear 13 июля 2010 в 22:25

    Что такое ? в первый раз слышу

  3. Вадим Макеев 15 июля 2010 в 0:00

    fiskus_boulder, мне кажется, что <mark> имеет более косвенное отношение к документу, в котором он появляется. Это универсальное выделение, которое допустимо в любом месте.

    sunnybear, твой супер-тег потерялся вместе с сутью вопроса. Приём!

  4. AntonMMF 23 июля 2010 в 6:49

    Короче всё ушло в гамно. Ребята из W3C знают толк в особых извращениях...

  5. Вячеслав Олиянчук 7 августа 2010 в 17:10

    Вот еще одна хорошая статья, продолжающая эту тему. Правда на английском.

  6. Mity 15 августа 2010 в 15:19

    Вот статья на русском и не буржуйская. Свои ребята провели исследования и меду прочим сам пробовал, отлично работает
    http://bitvar.ru/besplatnoe-seo/vnutrennyaya-optimizaciya-po-polochkam/43-strong-em-v-i.html
    Не так давно (10-07-2010) ребятами из исследовательского проекта bitvar были проведены исследования касающиеся strong em b i
    Очень интересно и познавательно

  7. Вадим Макеев 15 августа 2010 в 18:02

    Это свинское SEO, которое считает деньги и «генерит уникальный контент». Никакого отношения к веб-разработке упомянутая статья не имеет.

  8. tenshi 30 августа 2010 в 0:02

    словоблудие.. выделение не может быть не смысловым. если что-то выделяется - значит смысл в этом есть. какой? да разный. без чёткой семантики все эти элементы будут использоваться в перемешку, а значит смысла в них никакого не будет.

  9. Патрик 8 ноября 2010 в 13:07

    Вадим Макеев честно говоря с этим ворожением поднадоел, не первый раз его встречаю, а вот следование стандартам W3C ещё никто не отменял. И это не свинское сео, а порядок обусловленный стандартами, вам бы вадим побольше читать технической лит-ры если плохо сечете, и творите хаос из отличного материала.

  10. Вадим Макеев 8 ноября 2010 в 13:17

    Патрик, актуальные стандарты W3C описаны именно в этой статье и говорят, прежде всего, о смысловой разметке документа. «Свинским SEO» названа статья, упомянутая Mity, в которой речь идёт не о семантике документа, а о трюкачестве, которое помогает удобно пробиться в поисковую выдачу.

  11. Rastler 8 ноября 2010 в 13:20

    Абсолютно согласен с Вадимом

  12. Патрик 8 ноября 2010 в 21:19

    В представленном примере из статьи

    «Быстро позови доктора!»

    Но, господа позвольте, а разве предложение представленное в описанной выше статье не имеет целостную важность. И более правильное использование не будет выглядеть так - «Быстро позови доктора!». Иначе все остальные слова в данном предложении будут "водой" и теряются, поскольку его можно сократить до одного слова "ДОКТОРА!" которое будет лучше отражать сокращенный и экстренный смысл вложенный в него автором. И это не частность.
    Именно ради этих случаев я и инициировал исследование в bitvar.ru, но не моя вина, что автор материала, после заранее оговоренного срока, счел возможным представить информацию в статье в таком виде. Я не ратую за статью меня волнует важность конструкции, ведь она очевидна.

  13. Ольга Алексашенко 8 ноября 2010 в 22:03

    Патрик, вы вообще понимаете, что в статье написано? Там даны варианты акцента в зависимости от нужд говорящего. Важно «доктор» или «быстро» в каждом конкретном случае.
    Вы же в своем комментарии зачем-то передергиваете сказанное и сужаете значение до одного только случая, когда важно «доктор».
    Короче, в огороде бузина, а в Киеве дядька, извините.

  14. Василий 30 ноября 2010 в 15:14

    Не боюсь ошибиться, но по-моему смысловые различия между тэгами b и strong например были описаны еще во время XHTML.
    Во всяком случае это точно не новость, хотя информация достоверная, спасибо автору=)

  15. Максим Усачёв 5 октября 2011 в 21:30

    Ребят, небольшая опечатка в слова "подчёкнутой" в конце статьи.

    Добавить, в общем-то, и нечего — элемент хорошо всем нам знаком. Используйте вложенные элементы для обозначения относительной важности, для эмафтического ударения и для стилистически выделенных или просто полужирных фрагментов текста без подчёкнутой важности

    А за перевод спасибо, пишите ещё.

Разрешённые HTML-теги: <blockquote>, <a href="…">, <del>, <strong>, <b>, <em>, <i>.
Исходный код блочного уровня для лучшего отображения обрамляйте в элемент <source>.

Перейти к началу