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

Перевод «The i, b, em, & strong elements»

Перевод Вадим Макеев

Редактура Вадим Макеев

В то время как многие элементы из 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-элементы, готовые снова вернуться в ваш код. Сможете ли вы устоять перед их блестящими, полными семантики щенячьими глазками? Дайте нам знать!