Выделение текста в HTML: разница между strong, b, em, i и mark

Содержание

1. 1. Введение: почему в HTML по два тега для жирного шрифта и курсива
2. 2. Жирный шрифт: тег strong против тега b
   • Семантика тега strong: важность и предупреждения
   • Тег b: стилистическое привлечение внимания
   • Как поисковые системы и скринридеры воспринимают strong и b
3. 3. Курсивное начертание: тег em против тега i
   • Семантика em: изменение логического ударения
   • Тег i: иноязычные термины и альтернативный голос
4. 4. Подсветка текста: тег mark
   • Сценарии использования при поиске по странице
   • CSS-кастомизация фона подсветки
5. 5. Вспомогательные теги редактирования: del, ins, s и small
   • Разметка цен и распродаж: del плюс strong
   • Юридические сноски и копирайты: тег small
6. 6. Сводная сравнительная матрица тегов выделения
7. 7. Алгоритм выбора: какой тег использовать
8. 8. Часто задаваемые вопросы (FAQ)
9. Об авторе и редакции
10. Структурированные данные (JSON-LD)

---

1. Введение: почему в HTML по два тега для жирного шрифта и курсива

Тег strong в HTML is an importance marker (семантический маркер высокой важности или критической срочности фрагмента текста).

Тег b в HTML refers to stylistic offset (элемент привлечения визуального внимания к тексту без изменения его смысловой значимости).

Тег em в HTML is an emphasis marker (тег логического ударения, меняющий интонацию и восприятие фразы при прочтении).

Тег mark в HTML means highlighted relevance (контейнер для подсветки текстовых совпадений в поисковом контексте).

В эпоху HTML 4.01 теги <b> (bold) и <i> (italic) служили простыми директивами браузеру: «сделай текст жирным» или «наклони шрифт». Однако развитие голосовых ассистентов, программ экранного доступа (Screen Readers) и семантического поиска Google привело к фундаментальному пересмотру стандарта HTML5.

Согласно руководству MDN Web Docs по семантическому выделению текста, современные веб-стандарты разделяют оформление и смысл. Если вам нужно просто сделать слово толще ради визуального акцента в дизайне, это задача CSS (font-weight: bold). Если же фрагмент действительно несёт ключевой смысл документа, применяется семантический тег.

Эта статья развивает концепцию веб-вёрстки. Общую иерархию элементов и каркас документа вы найдёте в вводной статье:
👉 Вёрстка текста в HTML: полное руководство по тегам, стилизации и семантике.

---

2. Жирный шрифт: тег strong против тега b

Внешне оба элемента выглядят абсолютно одинаково: браузер отображает их полужирным начертанием шрифта. Но под капотом браузера и в дереве доступности (Accessibility Tree) они работают совершенно по-разному.

Семантика тега strong: важность и предупреждения

Спецификация WHATWG The strong Element определяет <strong> как элемент высокой важности, серьезности или срочности (strong importance, seriousness, or urgency).

<!-- strong указывает на жизненно важную или критическую информацию -->
<p>
  <strong>Внимание!</strong> Перед началом любых электромонтажных работ
  обесточьте распределительный щит в помещении.
</p>

<!-- strong подчеркивает ключевой вывод в аналитическом материале -->
<p>
  В результате аудита мы выяснили: <strong>скорость загрузки мобильной версии
  напрямую влияет на конверсию в корзине</strong>.
</p>

Вложенность тегов <strong> друг в друга усиливает смысловой вес:

<!-- Вложенный strong сообщает скринридеру о наивысшем приоритете фразы -->
<p>Это важно, а вот это — <strong>очень <strong>критично</strong></strong>.</p>

Тег b: стилистическое привлечение внимания

Элемент <b> (Bring Attention To) в стандарте HTML5 используется как «последнее средство» для стилистического выделения слов, когда ни один другой семантический тег не подходит по смыслу:

• Ключевые термины в резюме («Опыт работы: <b>JavaScript</b>, <b>Python</b>»);
• Названия брендов и продуктов в каталоге интернет-магазина;
• Первые слова абзаца в газетной верстке (буквицы или ключевые сущности);
• Ключевые слова в обзоре без цели подчеркнуть их сверхважность.

<!-- Использование b для выделения наименований продуктов в обзоре -->
<p>
  Сегодня на тестировании два флагмана: смартфон <b>Pixel 9 Pro</b>
  и планшет <b>Galaxy Tab S10</b>.
</p>

Как поисковые системы и скринридеры воспринимают strong и b

Согласно рекомендациям Google Search Central по оценке текстовых факторов, поисковые алгоритмы анализируют оба тега, однако тег <strong> передаёт алгоритмам более явный сигнал о том, что фраза является центральным тезисом блока.

• Программы экранного доступа (Screen Readers): Некоторые современные синтезаторы речи (NVDA, VoiceOver) при встрече тега <strong> изменяют высоту тона или интонацию голоса, акцентируя внимание незрячего пользователя. Тег <b> большинство скринридеров читает обычным нейтральным голосом.
• SEO-опасность: Если обернуть в <strong> половину статьи или целые абзацы подряд, алгоритмы поисковиков расценят это как поисковый спам, что приведет к снижению позиций. Используйте <strong> точечно — только для главных выводов (до 2–3 раз на 1000 слов).

Если перед выделением текста вам необходимо выстроить правильную структуру страницы, ознакомьтесь с нашим гайдом:
👉 Структурные теги в HTML: иерархия заголовков h1–h6, абзацы p, переносы br и hr.

---

3. Курсивное начертание: тег em против тега i

Аналогично паре strong/b, элементы <em> и <i> визуально наклоняют текст вправо курсивом (font-style: italic), но решают принципиально разные семантические задачи.

Семантика em: изменение логического ударения

Тег <em> (Emphasis) задаёт логическое ударение, которое коренным образом меняет смысл фразы при чтении вслух.

Сравните, как меняется контекст одного и того же предложения в зависимости от позиции <em>:

• <em>Мы</em> сегодня тестируем сервер. — (Именно наша команда, а не кто-то другой).
• Мы <em>сегодня</em> тестируем сервер. — (Именно в этот день, а не завтра).
• Мы сегодня <em>тестируем</em> сервер. — (Проводим тесты, а не вводим в промышленную эксплуатацию).
• Мы сегодня тестируем <em>сервер</em>. — (Проверяем именно сервер, а не клиентское приложение).

Спецификация WHATWG The em Element прямо указывает, что <em> меняет семантику утверждения. Скринридеры акцентируют слово с тегом <em> голосовым ударением.

Тег i: иноязычные термины и альтернативный голос

Тег <i> (Idiomatic Text) в HTML5 предназначен для текста, произносимого другим голосом или настроением, без придания фразе логического ударения:

1. Иноязычные слова и латинские термины: Homo sapiens, status quo, de facto.
2. Технические термины при первом упоминании: свойство specificity в CSS.
3. Мысли персонажа в художественном тексте: Неужели это конец? — подумал он.
4. Морские и воздушные суда: теплоход «Михаил Светлов».

<!-- Использование тега i для латинских биологических названий и терминов -->
<p>
  Обыкновенная лисица относится к виду <i>Vulpes vulpes</i>
  семейства псовых.
</p>

<!-- Использование i для обозначения внутренних размышлений героя -->
<p>
  Остановившись перед дверью, Андрей подумал: <i>стоит ли входить сейчас?</i>
</p>

---

4. Подсветка текста: тег mark

Тег <mark> появился в стандарте HTML5 и заполняет давний пробел веб-разработки: разметку текста, подсвеченного по причине его актуальности в текущем контексте пользователя.

Сценарии использования при поиске по странице

Самый частый сценарий применения <mark> — вывод результатов поискового скрипта внутри текста статьи или каталога:

<!-- Подсветка поискового запроса пользователя "семантика" в блоке результатов -->
<div class="search-result">
  <h3>Результат поиска по запросу «семантика»</h3>
  <p>
    Правильная <mark>семантика</mark> веб-страницы гарантирует, что поисковые
    роботы корректно распознают смысл контента.
  </p>
</div>

В соответствии с правилами доступности W3C WAI Guidelines for mark, поскольку некоторые программы чтения с экрана не объявляют цвет фона, для критически важной информации тег <mark> дополняют скрытым текстом для скринридеров или атрибутом role.

CSS-кастомизация фона подсветки

По умолчанию браузеры отображают <mark> с ярко-желтым фоном (background-color: yellow; color: black;). В современных дизайн-системах подсветку кастомизируют под палитру бренда:

/* Современная пастельная стилизация тега mark */
mark.brand-highlight {
  /* Мягкий янтарный фон вместо едкого желтого */
  background-color: #fef08a;
  
  /* Темный контрастный текст для соответствия стандарту WCAG AAA */
  color: #854d0e;
  
  /* Скругление углов маркера */
  border-radius: 4px;
  
  /* Небольшие боковые отступы маркера */
  padding: 0.1em 0.35em;
}

---

Форматирование текста онлайн
Автоматическая и ручная разметка текста тегами заголовков, списков и абзацев. Поддерживает Markdown-синтаксис и экспорт в 1 клик. Автоматические абзацы, очистка лишних стилей и подготовка контента к публикации.

👉 Конвертер текста в HTML онлайн

---

5. Вспомогательные теги редактирования: del, ins, s и small

Для полноценной работы с текстом HTML5 предлагает ряд специализированных тегов для фиксации изменений и вспомогательной информации.

Разметка цен и распродаж: del плюс strong

Частая ошибка в интернет-магазинах — перечеркивание старой цены через простой тег <s> или стилями text-decoration: line-through.

Семантически безупречный шаблон для распродаж использует связку <del> (удалённая старая цена) и <strong> (новая актуальная цена):

<!-- Идеальная семантическая разметка цены со скидкой -->
<div class="product-price">
  <span class="old-price">
    Старая цена: <del datetime="2026-10-01">12 000 ₽</del>
  </span>
  <span class="new-price">
    Цена по акции: <strong>8 990 ₽</strong>
  </span>
</div>

Атрибут datetime в теге <del> указывает поисковикам точную дату изменения цены, что усиливает доверие к скидке со стороны Google Shopping.

Юридические сноски и копирайты: тег small

Тег <small> в HTML5 не просто уменьшает размер шрифта — он обозначает второстепенную сопроводительную информацию:

• Уведомления об авторских правах (копирайты);
• Предупреждения об ограничениях ответственности (дисклеймеры);
• Лицензионные условия в футере сайта.

<!-- Корректное использование тега small для правовой информации -->
<p>
  Все заказы доставляются курьерской службой в течение суток.<br>
  <small>* Бесплатная доставка действует только в пределах МКАД при заказе от 3 000 ₽.</small>
</p>

---

6. Сводная сравнительная матрица тегов выделения

Используйте эту матрицу при проектировании верстки и UI-компонентов:

Тег	Тип значения	Визуальный дефолт	Поведение скринридера	Аналог в CSS	Когда использовать
<strong>	Семантический	Полужирный (700)	Меняет интонацию / тон	font-weight: bold;	Срочные предупреждения, ключевые выводы
<b>	Стилистический	Полужирный (700)	Обычное чтение	font-weight: bold;	Ключевые слова в резюме, товары в обзоре
<em>	Семантический	Курсив (italic)	Логическое ударение голосом	font-style: italic;	Смысловой акцент, меняющий суть фразы
<i>	Стилистический	Курсив (italic)	Обычное чтение	font-style: italic;	Термины на латыни, мысли, сленг
<mark>	Контекстный	Желтый фон	Зависит от настроек a11y	background-color	Подсветка поисковых совпадений
<del>	Редакционный	Перечёркивание	Читает «удалено»	text-decoration: line-through;	Старая замененная цена товара
<ins>	Редакционный	Подчёркивание	Читает «вставлено»	text-decoration: underline;	Добавленный текст в договоре/документе
<small>	Вспомогательный	Мелкий кегль	Обычное чтение	font-size: 0.85em;	Сноски, дисклеймеры, копирайт

---

7. Алгоритм выбора: какой тег использовать

Перед тем как вставить тег выделения в разметку, ответьте на 3 простых вопроса:

1. Изменится ли смысл фразы, если прочитать её вслух с ударением на это слово?
   • Да ➔ Используйте <em>.
   • Нет ➔ Переходите ко второму вопросу.
2. Является ли эта фраза критически важным предупреждением или главным выводом раздела?
   • Да ➔ Используйте <strong>.
   • Нет ➔ Переходите к третьему вопросу.
3. Требуется ли выделить слово чисто визуально ради удобства чтения (термин, марка, продукт)?
   • Если это иноязычный термин или название вида ➔ Используйте <i>.
   • Если это ключевое слово для привлечения взгляда ➔ Используйте <b>.
   • Если это элемент дизайна кнопки или меню ➔ Используйте CSS (font-weight / font-style).

Полный контроль над типографикой и шрифтами в стилях разобран в нашей финальной спице:
👉 Стилизация текста в CSS: выравнивание text-align, шрифты и списки.

---

8. Часто задаваемые вопросы (FAQ)

Влияет ли выделение ключевых слов тегом strong на позиции в поиске?

Да, поисковые алгоритмы Google и Яндекса придают умеренно больший вес словам, заключенным в тег <strong>, так как он семантически указывает на важность фразы. Однако выделение слишком большого числа ключевых слов расценивается алгоритмами как поисковый спам (переоптимизация) и приводит к понижению страницы в выдаче.

Можно ли вкладывать тег em внутрь тега strong?

Да, спецификация HTML5 полностью разрешает конструкцию <strong><em>текст</em></strong>. Это указывает браузеру и скринридеру на фразу, которая одновременно обладает высокой важностью и несёт эмфатическое логическое ударение.

Почему нельзя использовать тег b для всех жирных шрифтов на сайте?

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

В чём отличие тега mark от простого span с желтым фоном?

Тег <mark> несёт явный семантический маркер поисковой подсветки и поддерживается инструментами доступности. Тег <span> с инлайновыми стилями семантически нейтрален и не понятен ни поисковым краулерам, ни синтезаторам речи.