Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Різниця між тегами strong та b в HTML». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

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

## Теорія

### TL;DR

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

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

```html
Звичайний текст, потім жирний без значення.

Звичайний текст, потім важливий жирний.

```

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

### Головна різниця

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

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

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

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

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

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

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

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

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

```html

Увага: зона високої напруги. Не заходити.

Увага: зона високої напруги. Не заходити.
```

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

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

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

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

```html
Критично: перевір це перед деплоєм.
```

Зовнішній `` застосовує роль важливості до всього вмісту всередині, включно з частиною ``. Сам `` тільки додає візуальний хук. Це валідний 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>
 Зберігай роботу частіше. Автозбереження вимкнено за замовчуванням.

Зберігай роботу частіше. Автозбереження вимкнено за замовчуванням.
 
</body>
</html>
```

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

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

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

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

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати871 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.