Как выделять смысл в HTML-статье: strong, em, b и CSS

В HTML визуально похожее выделение может означать разные вещи. <strong> сообщает о важности или срочности, <em> передаёт смысловое ударение, а <b> и <i> выделяют фрагмент по особой причине, не повышая его важность и не меняя интонацию фразы. Если нужен только жирный или наклонный вид, используйте CSS. Такое разделение помогает сохранить смысл при смене оформления, озвучивании и повторном использовании контента.

Перед тем как выделить слово, спросите: что читатель должен понять благодаря этому фрагменту? Он несёт критически важное условие? На нём меняется смысловой акцент предложения? Это термин, иностранное слово или название произведения? Либо тексту просто нужен контрастный вес? Ответ определяет разметку.

Главная ошибка — выбирать тег по виду в браузере. По умолчанию <strong> часто жирный, а <em> обычно курсивный, поэтому их легко принять за замену кнопок «Ж» и «К» в редакторе. Но оформление по умолчанию — лишь стартовый стиль. Значение элементов задаёт HTML, а окончательный вид может изменить таблица стилей, тема сайта или настройки читателя.

Практическое правило: сначала назначьте смысл, затем выберите элемент, после этого настройте внешний вид. Если смысловой роли нет, не добавляйте семантический тег только ради декоративного эффекта.

Тег <strong> выражает степень важности; <em> — ударение в произнесённой фразе. Например, в предложении «Отправьте файл сегодня» выделение слова «сегодня» тегом <em> меняет акцент: речь именно о сроке, а не о способе отправки. Если же срок является обязательным правилом, и его нарушение важно, подходит <strong>: «Файл необходимо отправить сегодня».

Элементы <b> и <i> используют для фрагментов, которые нужно отличить от окружающего текста, но не объявлять более важными и не выделять голосом. <b> может привлечь взгляд к ключевому слову или имени в вводном абзаце. <i> подходит для термина или выражения в другой тональности. Если есть более точный элемент, например <cite> для названия произведения или <dfn> для определяемого термина, используйте его.

Помечайте <strong> то, что читатель должен считать более важным, чем соседнее содержание. Это может быть ограничение, предупреждение о последствии, обязательный шаг или условие, от которого зависит результат. Не оборачивайте целый абзац автоматически: выделите ту часть, где сосредоточена важность.

Например, в инструкции «Перед заменой файла сохраните исходную копию» критично именно действие «сохраните исходную копию». Можно выделить предложение целиком, если всё оно представляет предупреждение. Если рядом уже стоит отдельная плашка «Важно», повторное оборачивание каждой фразы в <strong> создаёт визуальный шум и ослабляет контраст.

Вложенный <strong> может обозначать ещё более высокую относительную важность. Однако вложенность редко полезна в редакционной статье: несколько уровней выделения сложнее читать и трудно поддерживать в дизайне. Обычно лучше написать предупреждение отдельным предложением или блоком, а внутри оставить один ясный акцент.

Используйте <em>, если интонационное ударение меняет оттенок или смысл высказывания. Сравните: «Мы рекомендуем проверить макет» и «Мы рекомендуем проверить макет». Во втором варианте автор подчёркивает рекомендацию: это именно совет, а не требование. Здесь курсив — следствие смыслового ударения, а не причина выбора тега.

Ударение может быть вложенным, если фраза действительно требует нескольких уровней акцента, но на практике такое чтение утомительно. Не используйте <em> для названия книги, иностранного термина или каждого слова, которому хочется придать элегантный вид. У таких случаев другая роль; кроме того, менять начертание проще через CSS.

В современной разметке <b> — способ привлечь внимание к фрагменту без добавления повышенной важности. Например, в вводном определении можно визуально выделить название понятия, если структура предложения от этого становится легче для просмотра. Но для настоящей ключевой мысли используйте <strong>, а для обычного визуального контраста в оформлении компонента — CSS.

<i> выделяет текст, который отличается от окружающей речи по типу или тону: например, иностранное слово, термин, название таксона или внутреннюю мысль персонажа. Для заголовка книги, фильма или другого произведения проверьте, не точнее ли <cite>. Для математической переменной есть <var>, для пользовательского ввода с клавиатуры — <kbd>. Подходящий элемент сообщает о природе фрагмента, а не только о наклоне букв.

Элементы <b> и <i> не запрещены и не являются ошибкой сами по себе. Ошибка возникает, когда их выбирают только потому, что они сейчас отображаются жирно или курсивно, хотя контент означает важность, ударение или специальный термин.

Если смысл текста не меняется, не добавляйте дополнительную семантику. Для дизайнерского веса применяйте font-weight, для начертания — font-style, а для особого цвета, фона или обводки — классы и CSS-свойства. Так оформление можно менять централизованно, не переписывая текст и не создавая ложный смысл.

<p>Материал подготовлен <span class="author-name">редакцией</span>.</p>

.author-name {
  font-weight: 700;
}

Если «редакция» просто стилистически выделена как подпись, span с классом уместнее, чем <strong>. Но CSS не должен быть единственным способом передать критическую информацию. Красный цвет предупреждения можно сохранить визуально, а само сообщение сформулировать текстом и при необходимости пометить подходящим семантическим элементом. Тогда читатель поймёт его и в чёрно-белой печати, и при пользовательской таблице стилей.

Отдельно проверьте выбранный шрифт. У него может отсутствовать настоящее полужирное или курсивное начертание; браузер иногда синтезирует похожий вид. Смысл тега от этого не меняется, но контраст и читаемость могут пострадать. Убедитесь, что типографическая система сайта предусматривает реальные начертания и что выделение различимо без чрезмерного утолщения или наклона.

Применяйте такую короткую проверку перед публикацией:

После выбора прочитайте предложение вслух. Для <em> должно быть слышно интонационное ударение. Для <strong> можно объяснить, почему этот фрагмент важнее соседнего. Если объяснения нет, вероятно, оформительский акцент следует реализовать стилем.

Ставить <strong> везде, где нужен жирный текст. Тогда страница сообщает об одинаковой важности слишком многого. Читателю труднее увидеть настоящее предупреждение, а обновление дизайна становится сложнее. Декоративное выделение следует оформлять CSS-классом.

Использовать <em> для каждого курсива. Курсивный вид бывает у терминов, названий и стилистических вставок. Интонационное ударение подходит не для каждой из этих задач. Выбирайте тег по роли фрагмента и оставляйте CSS отвечать за визуальный результат.

Считать <b> и <i> устаревшими дублями. Это действующие элементы с собственным назначением. Они могут быть уместны, но не являются универсальными тегами для любого жирного или наклонного фрагмента. Если значение можно точно выразить другим элементом, предпочитайте его.

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

Оборачивать длинные куски без проверки. Слишком длинная область <strong> или <em> размывает смысл элемента. Чётко выделяйте существенную часть, сохраняя естественное чтение и контекст предложения.

Технически браузер отобразит его жирным по умолчанию, но выбирать элемент только ради вида не следует. <strong> сообщает о важности, серьёзности или срочности текста. Для декоративного полужирного начертания задайте CSS font-weight.

<em> задаёт смысловое ударение, которое может изменить интонацию фразы. <i> отделяет текст от обычной речи по другой причине, например как термин или выражение в ином тоне. Оба элемента часто выглядят курсивными, но визуальное сходство не означает одинаковый смысл.

<b> подходит, когда фрагмент надо визуально заметить, но он не важнее соседнего текста. <strong> подчёркивает содержание, которое действительно обладает повышенной важностью или срочностью. Если важна только визуальная деталь компонента, используйте CSS.

Да, если фраза одновременно требует интонационного ударения и сообщает важное содержание. Вложенность должна точно отражать смысл, а не усиливать видимый жирный курсив ради эффекта. Если порядок и уровни выделения трудно объяснить, упростите фразу.

Проверьте, подходит ли элемент <cite> для названия произведения. <i> уместен для фрагмента в другом тоне или типа текста, но у названия произведения есть отдельная семантическая категория. Оформление любого из этих элементов можно отдельно настроить CSS.

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

Оставьте элементы, которые несут смысл, а декоративные эффекты перенесите в CSS. Если удалить <strong> или <em>, вместе со стилем может исчезнуть и обозначенная роль текста. Если же акцент чисто визуальный, отдельный класс с CSS обычно проще поддерживать.

В веб-статье выбирайте разметку по смыслу: <strong> для важного, <em> для интонационного ударения, <b> и <i> для других типов выделения. CSS отвечает за чисто декоративное оформление. Проверьте разметку на примерах, затем настройте начертания и цвета. Если вы разрабатываете собственную кириллическую гарнитуру для сайта, протестируйте её в Fontgenerator и оцените, как в интерфейсе выглядят обычный, жирный и курсивный текст.