Когда используется тег strong?

Разница между <strong> и <b>, и когда использовать <strong>

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

Основные случаи использования тега <strong>

1. Семантическое выделение важности

Основная цель <strong> — сообщить браузерам, программам чтения с экрана (скринридерам) и другим вспомогательным технологиям, что заключённый в него текст имеет больший вес или значимость в текущем контексте. Это особенно критично для доступности (accessibility).

<p>Перед началом работы <strong>обязательно отключите питание</strong> на распределительном щитке.</p>

Здесь скринридер может изменить интонацию, чтобы донести важность предупреждения для незрячего пользователя.

2. Ключевые моменты в тексте

Используется для выделения ключевых терминов, выводов или самых существенных частей сообщения, на которые должен обратить внимание пользователь.

<p>Наша основная ценность — <strong>качество и надёжность</strong> всех поставляемых решений.</p>

3. Предупреждения и предостережения

Идеально подходит для выделения текста, содержащего предупреждения о безопасности, ограничения или критические условия.

<div class="alert">
    <strong>Внимание!</strong> Не сохраняйте пароль в браузере на общедоступных компьютерах.
</div>

4. Ярлыки в формах или интерфейсах

Часто применяется для выделения меток (labels) полей ввода, особенно обязательных, чтобы визуально и семантически обозначить их важность.

<label for="email"><strong>E-mail (обязательно):</strong></label>
<input type="email" id="email" required>

Сравнение с тегом <b> (Bold)

• <b> (Bold — жирный): Это презентационный элемент. Исторически использовался только для визуального выделения текста жирным шрифтом без придания ему дополнительной семантической важности. Он не меняет смысловой нагрузки текста для вспомогательных технологий. В современной практике его используют для стилистического выделения, например, ключевых слов в аннотации, именования продуктов в отзыве или других элементов, которые нужно визуально отделить, не повышая их семантического веса.

  <p>Термин <b>«гипертекст»</b> был введён Тедом Нельсоном в 1965 году.</p>
  

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

Важные технические и практические аспекты

• Вложенность и степень важности: Теги <strong> можно вкладывать друг в друга. Каждый уровень вложенности теоретически указывает на более высокую степень важности (хотя на практике это редко используется, и визуально разница обычно не стилизуется).

  <p>Это <strong>очень <strong>важное</strong> предупреждение</strong>.</p>
  

• Стилизация через CSS: Хотя по умолчанию браузер отображает <strong> как font-weight: bold;, это поведение можно и нужно переопределять с помощью CSS, чтобы лучше интегрировать акцент в дизайн системы. При этом семантическая важность сохранится.

  strong {
      font-weight: 600;
      color: #c00; /* Выделение цветом вместе с жирным шрифтом */
      background-color: #fff9e6;
      padding: 2px 4px;
  }
  

• Доступность (Accessibility): Это главная причина выбирать <strong> вместо <b>. Скринридеры (например, NVDA, JAWS, VoiceOver) могут озвучивать текст внутри <strong> с изменённой тональностью или интонацией, передавая его важность. Тег <b> такой возможности не даёт, он "немой" с точки зрения семантики.

Краткий итог и рекомендации

Используйте тег <strong>, когда:

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

Используйте тег <b>, когда:

• Нужно лишь визуально выделить фрагмент (сделать его жирным), не изменяя его смыслового веса в документе.
• Вы стилизуете элементы дизайна, такие как лиды, названия в таблицах или первые слова абзаца.

Современный подход: Вёрстка должна быть семантической. Поэтому если стоит выбор между <b> и <strong> — в большинстве случаев для выделения важного контента правильнее выбрать <strong>. Для чисто декоративного жирного начертания можно использовать <b>, но чаще эту роль теперь берёт на себя CSS-свойство font-weight, применённое к <span> или другому элементу.