Різниця між тегами strong та b в HTML

HTML та CSS~3 хв читання

 та  обидва роблять текст жирним за замовчуванням, але тільки  повідомляє браузеру, і всьому що його слухає, що цей текст справді важливий.

Теорія

TL;DR

 = виділення маркером на папері: змінює вигляд, нічого не говорить про значення
 = зірочка на листі: змінює вигляд І позначає як важливе
Скрінрідери наголошують на вмісті ;  читається рівно, як звичайний текст
Обидва теги отримують font-weight: bold з вбудованих стилів браузера, тому візуально виглядають однаково
Правило: смисловий наголос → . Тільки стиль → CSS font-weight: bold

Швидкий приклад

html

<p>Звичайний текст, потім <b>жирний без значення</b>.</p>
<!-- Скрінрідер читає "жирний без значення" рівно, без наголосу -->

<p>Звичайний текст, потім <strong>важливий жирний</strong>.</p>
<!-- Скрінрідер наголошує на "важливий жирний" -->

Відкрий це в браузері з NVDA або VoiceOver і різниця чутна одразу. Візуально? Однаково.

 - презентаційний тег. Він додає жирний шрифт у render tree і на цьому зупиняється.  іде далі: браузери додають його до дерева доступності (accessibility tree) з роллю важливості, яку зчитують AT API на кшталт MSAA та IAccessible2. Саме тому скрінрідери озвучують вміст  з наголосом або префіксом типу "важливо", а  не отримує нічого додаткового.

Коли що використовувати

Назва продукту або мітка в UI, де жирний - суто дизайнерське рішення → CSS font-weight: bold, або  в крайньому разі
Попередження, дедлайн або повідомлення про помилку, яке не можна пропустити → 
Легасі-код де жирний потрібен тільки для вигляду → додай CSS-клас, уникай обох тегів
Пріоритет доступності або SEO → завжди , ніколи

Таблиця порівняння

Аспект	`<b>`	`<strong>`
Стиль за замовчуванням	Жирний	Жирний
Семантика	Немає (презентаційний)	Важливість
Скрінрідери	Читають рівно	Озвучують з наголосом
Вплив на SEO	Нейтральний	Сигнал релевантності
Дерево доступності	Не враховується	Роль важливості
Коли використовувати	Рідко; тільки візуальні мітки	Попередження, ключові факти

Як браузер це обробляє

Обидва теги отримують font-weight: bold з вбудованого CSS браузера, тому без кастомних стилів виглядають однаково. Розбіжність виникає в дереві доступності:  отримує роль важливості, яку зчитують через OS-рівневий accessibility API;  залишається тільки в render tree. Один CSS-рядок (strong { font-weight: normal; }) прибирає візуальний жирний з , але семантична роль залишається. Скрінрідери все одно наголошують на ньому.

Типові помилки

Використання  для попереджень або критичних повідомлень:

html

<!-- Неправильно: скрінрідер читає це рівно -->
<p>Увага: <b>зона високої напруги</b>. Не заходити.</p>

<!-- Правильно: скрінрідер наголошує на попередженні -->
<p>Увага: <strong>зона високої напруги</strong>. Не заходити.</p>

Припущення, що  завжди означає жирний стиль:

css

/* Це прибирає візуальний жирний, але НЕ семантику */
strong { font-weight: normal; }

Якщо кастомна тема скидає стиль , скрінрідери все одно позначають його як важливе. Стиль прив'язуй до CSS-класу, а не до тегу.

Безпечне вкладення  всередину :

html

<strong>Критично: <b>перевір це</b> перед деплоєм.</strong>

Зовнішній  застосовує роль важливості до всього вмісту всередині, включно з частиною . Сам  тільки додає візуальний хук. Це валідний HTML, але один  зі стилем через CSS читається значно чіткіше.

Де зустрічається

MDN Web Docs використовує  для попереджень і повідомлень про застарілі API по всій документації
Документація React обгортає назви обов'язкових пропсів у , щоб позначити важливість
WordPress Gutenberg за замовчуванням вставляє , коли натискаєш кнопку жирного в редакторі
Bootstrap у розділі типографіки рекомендує  замість

Питання на співбесіді

Q: Чи може CSS зробити  і  повністю ідентичними?
A: Візуально - так. Але семантично - ні. Дерево доступності все одно позначає  як важливе, і скрінрідери реагують на це незалежно від того, як тег виглядає на екрані.

Q: Google справді по-різному ставиться до  і  для SEO?
A: Google підтвердив, що  несе вагу як сигнал релевантності ключових слів.  вважається нейтральним стилем. Різниця відчутна для контенту з ключовими словами, за якими ти хочеш ранжуватися.

Q:  досі валідний в HTML5?
A: Так. HTML5 зберіг  і перевизначив його як тег для тексту, який "стилістично відрізняється" без вираження важливості. Тег валідний, але WCAG 4.1.2 рекомендує семантичні альтернативи там, де є смисловий контекст.

Q: Як поводиться  всередині контейнера з aria-hidden?
A: Семантична роль пригнічується і допоміжні технології повністю пропускають вміст. Якщо  знаходиться всередині елемента з aria-hidden="true", скрінрідери не озвучать його незалежно від тегу.

Приклади

Базовий: візуальний проти семантичного жирного

html

<!DOCTYPE html>
<html lang="uk">
<body>
  <p>Зберігай роботу частіше. <b>Автозбереження</b> вимкнено за замовчуванням.</p>
  <!-- "Автозбереження" виглядає жирним, скрінрідер читає рівно -->

  <p>Зберігай роботу частіше. <strong>Автозбереження вимкнено</strong> за замовчуванням.</p>
  <!-- Скрінрідер наголошує на "Автозбереження вимкнено" -->
</body>
</html>

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

Середній рівень: React-компонент з семантичним наголосом

jsx

// OrderSummary.jsx
function OrderSummary({ productName, deadline }) {
  return (
    <article>
      <h2>Деталі замовлення</h2>
      <p>
        Ви обрали <b>{productName}</b>.
        {/* Візуальна мітка - семантична вага не потрібна */}
      </p>
      <p>
        Оплатіть до <strong>{deadline}</strong>, щоб уникнути скасування.
        {/* Дедлайн важливий - скрінрідер наголошує на ньому */}
      </p>
    </article>
  );
}

 для назви продукту - дизайнерське рішення.  на дедлайні - це сигнал: якщо користувач навігує скрінрідером, він не повинен пропустити цю дату.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?