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

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

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

Различие между <b> и <strong>

<b> — Boldface (визуальное выделение):

<!-- Просто делает текст жирным визуально -->
<p>Сегодня в меню: <b>борщ</b>, <b>котлеты</b>, <b>компот</b></p>

<!-- Скрин-ридер читает нормально, без выделения значимости -->

<strong> — Strong importance (семантическое значение):

<!-- Выделяет семантически важный текст -->
<p><strong>Внимание:</strong> Это может быть опасно!</p>

<!-- Скрин-ридер подчеркивает важность, может изменить интонацию -->

Случаи использования <b>

1. Выделение названий продуктов (не важные, просто выделены):

<p>В нашем кафе вы найдёте <b>лапшу рамэн</b>, <b>удон</b> и <b>соба</b>.</p>

<!-- Это просто перечисление продуктов, не важные для смысла -->

2. Ключевые слова в поисковом контексте (не для SEO, просто выделение):

<p>
  Результаты поиска по "<b>javascript async await</b>":
</p>
<ul>
  <li><b>JavaScript</b> асинхронность и Promises</li>
  <li><b>Async</b>/<b>Await</b>: полный гайд</li>
</ul>

3. Первый абзац статьи (выделение без придания важности):

<article>
  <h1>История JavaScript</h1>
  <p>
    <b>JavaScript</b> был создан Бренданом Айхом в 1995 году...
  </p>
  <p>До этого веб был статичным...</p>
</article>

4. Названия в контексте (географические, технические):

<p>
  Компания <b>Apple Inc.</b> основана в 1976 году в городе <b>Лос-Анджелес</b>.
</p>

Случаи использования <strong>

1. Предупреждения и важная информация:

<p><strong>Предупреждение:</strong> Перед началом прочитайте инструкцию!</p>
<p><strong>Важно:</strong> Резервная копия будет удалена!</p>

2. Критические условия:

<p>
  Статус: <strong>В процессе</strong>
</p>
<p>
  Здоровье: <strong>Критическое</strong>
</p>

3. Заголовки в статьях (semantic importance):

<article>
  <h1>Как выучить JavaScript</h1>
  <p>
    <strong>Ключевой момент:</strong> Практика важнее теории.
  </p>
</article>

4. Юридические и обязательные условия:

<p>
  <strong>Это обязательно</strong> согласовать с администратором.
</p>
<p>
  <strong>Примечание:</strong> Ваша информация не будет передана третьим лицам.
</p>

Сравнение в коде

<!-- ❌ НЕПРАВИЛЬНО: используем <strong> для стилистического выделения -->
<p>Меню: <strong>борщ</strong>, <strong>оливье</strong>, <strong>пельмени</strong></p>

<!-- ✅ ПРАВИЛЬНО: используем <b> для стилистического выделения -->
<p>Меню: <b>борщ</b>, <b>оливье</b>, <b>пельмени</b></p>

<!-- ❌ НЕПРАВИЛЬНО: используем <b> для важного предупреждения -->
<p><b>Внимание!</b> Это опасная операция.</p>

<!-- ✅ ПРАВИЛЬНО: используем <strong> для важного предупреждения -->
<p><strong>Внимание!</strong> Это опасная операция.</p>

Доступность (Accessibility)

Скрин-ридер читает <b> и <strong> по-разному:

<!-- <b> -->
<p>Вес: <b>50 кг</b></p>
<!-- Скрин-ридер: "Вес точка пятьдесят кг" (без выделения) -->

<!-- <strong> -->
<p><strong>Осторожно:</strong> Опасная область</p>
<!-- Скрин-ридер может изменить интонацию, выделив важность -->

Лучшие практики:

<!-- ✅ Хорошо для доступности -->
<p>
  Статус: <strong>Активен</strong> (важно знать)
  Расширение: <b>txt</b> (просто тип файла)
</p>

<!-- ❌ Не полезно для доступности -->
<p>
  Статус: <b>Активен</b> (теряется информация об важности)
</p>

Использование в React/Vue

// React компонент
function MenuItem({ name, isPopular }) {
  return (
    <div>
      <p>
        Блюдо: <b>{name}</b>
        {isPopular && <span> — <strong>Хит сезона!</strong></span>}
      </p>
    </div>
  );
}

// <b> для названия (стиль)
// <strong> для "Хит сезона" (семантическая важность)

<!-- Vue шаблон -->
<template>
  <div class="product">
    <p>Товар: <b>{{ productName }}</b></p>
    <p v-if="outOfStock">
      <strong>Внимание:</strong> Товар закончился
    </p>
  </div>
</template>

Стилизация

/* Оба тега имеют жирный шрифт по умолчанию */
b, strong {
  font-weight: bold;
}

/* Но можно различать визуально */
strong {
  font-weight: 700;
  color: #d32f2f; /* Красный для важного */
}

b {
  font-weight: 600;
  color: inherit; /* Обычный цвет */
}

Таблица сравнения

Лучшие практики

1. Используй <b> для стилистического выделения текста без семантической важности (названия, категории, ключевые слова)
2. Используй <strong> для семантически важной информации (предупреждения, условия, критические данные)
3. Не переусложняй — используй тег когда есть реальная необходимость
4. Для доступности — правильный выбор тега помогает людям с нарушением зрения
5. CSS вместо тегов — для сложной стилизации используй <span class="highlight"> с CSS

<!-- ✅ Лучше использовать семантически правильный тег -->
<p>Сегодня специально: <b>омлет</b></p>
<p><strong>Запомните:</strong> Никогда не забывайте сохранять.</p>

<!-- ❌ Избегай смешивания смыслов -->
<p><strong>Меню:</strong> <b>борщ</b>, <b>пельмени</b></p>
<!-- Выглядит странно: strong для категории, b для названия -->

Тег <b> — это инструмент для стилистического выделения, когда визуальное выделение не несёт семантического значения. Правильное использование <b> и <strong> улучшает доступность и SEO вашего сайта.