Откуда теги b и strong берут свою жирность

Откуда теги <b> и <strong> берут свою «жирность»

Визуальное представление элементов <b> (bold) и <strong> в браузерах — жирный текст — является результатом применения стандартных стилей браузера, которые определены в дефолтных (user-agent) CSS-стилях. Эти стили предопределены для каждого HTML-элемента и обеспечивают базовое оформление, чтобы документ был читаемым даже без авторских стилей.

Семантическое отличие и стандартные стили

Важно понимать ключевое различие между этими тегами, которое лежит в основе их визуального сходства:

• Тег <b> — это чисто презентационный (визуальный) элемент. Он не несёт дополнительной семантической нагрузки и исторически использовался для выделения текста жирным шрифтом без указания важности.
• Тег <strong> — это семантический элемент, указывающий на важность, серьёзность или urgency содержимого. Его основная роль — передать смысловую нагрузку, а жирное начертание — лишь стандартный способ визуализации этой важности для пользователя.

Дефолтные CSS-правила в браузерах для этих элементов обычно задаются следующим образом:

/* Пример стандартных стилей (примерный, реальные могут варьироваться) */
b, strong {
  font-weight: bold;
}

Это правило означает, что браузер автоматически присваивает свойство font-weight: bold всем элементам <b> и <strong>, если авторские стили не переопределяют его.

Механизм и каскадность

Процесс выглядит так:

1. Браузер загружает HTML и строит DOM.
2. Применяется таблица стилей user-agent (дефолтные стили). Для <b> и <strong> она устанавливает font-weight: bold.
3. Затем применяются авторские стили (CSS от разработчика) и пользовательские стили (например, из браузерных расширений). Они могут переопределить дефолтное значение по правилам каскадирования CSS.

Таким образом, «жирность» — это не внутреннее свойство тегов, а результат каскадного применения CSS. Если разработчик задаёт свои стили, он может полностью изменить отображение:

/* Убираем жирность для strong, делаем его красным и подчёркнутым */
strong {
  font-weight: normal;
  color: crimson;
  text-decoration: underline;
}

/* Для b задаём обычный вес, но добавляем фон */
b {
  font-weight: normal;
  background-color: lightyellow;
}

В этом случае браузер отобразит элементы согласно авторским стилям, игнорируя дефолтные.

Практические рекомендации и веб-стандарты

Согласно современным стандартам HTML5 и принципам семантической разметки:

• Используйте <strong> для обозначения важности текста. Это улучшает доступность (accessibility): скрин-ридеры (screen readers) могут изменять интонацию при чтении содержимого <strong>, выделяя его значимость.
• Используйте <b> в редких случаях, когда нужно выделить текст визуально без придания семантической важности. Примеры: ключевые слова в документах, названия продуктов в списках.

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

Вывод

Жирность тегов <b> и <strong> берётся из дефолтных CSS-стилей браузера, которые назначают им font-weight: bold. Это оформление может быть изменено через авторские CSS-правила. Основное различие — в семантике: <strong> указывает на важность содержимого, а <b> служит лишь для визуального выделения. При разработке следует делать выбор осознанно, учитывая принципы доступности и семантической разметки.