Тег b отмечает фрагмент, на который стоит обратить внимание читателя, но без смысла важности, ударения или другого особого значения. Название - от английского bold, «жирный». Тег парный, закрывающий обязателен, собственных атрибутов нет, только глобальные. Он входит в стандарт и не устарел, а по умолчанию браузер выводит его полужирным.
<p>Я сравнил чайники <b>Аква-2</b> и <b>Терма-5</b>: первый греет быстрее.</p>В этой статье
Что делает тег b в HTML
Стандарт HTML называет тег для случаев, когда текст принято отмечать, но особого значения у отметки нет. Справочник MDN перечисляет три типичных случая: ключевые слова в описании, названия товаров в обзоре и первая фраза абзаца.
Пример: три случая, где нужен b
Нажимайте на кнопки: в каждом случае отмеченные куски выделены жирным, вокруг них показаны теги b, а под текстом написано, что именно отмечено и почему это не strong.
Общее у всех трёх случаев одно: если убрать теги b, смысл текста не изменится. Изменится только то, как быстро глаз находит нужное.
Тег b, strong или CSS-класс: как выбрать
Жирный шрифт можно получить тремя способами, и выбор зависит от того, что будет, если выделение убрать.
Смысл изменится, потому что текст важен или опасен - нужен strong. Смысл изменится из-за ударения на слове - нужен em. Смысл не изменится, но читателю удобнее находить отмеченное - нужен b. Выделение нужно только для вида, а смысла в нём нет - берут класс и CSS.
<p><strong>Не</strong> отключайте питание.</p>
<p>Я <em>вчера</em> купил хлеб.</p>
<p>Чайник <b>Аква-2</b> греет быстро.</p>
<p>Скидка <span class="sale">20%</span>.</p>| Признак | b | strong | Класс и CSS |
|---|---|---|---|
| Что сообщает | Внимание без важности | Важность, срочность | Ничего, только вид |
| Пример | Название товара в обзоре | Предупреждение | Плашка «Акция» |
| Вид по умолчанию | Более толстый шрифт | Более толстый шрифт | Как задано в CSS |
| Роль в структуре доступности (Chromium 141) | Отдельной роли нет | strong | Отдельной роли нет |
Пример: подберите тег к ситуации
Под каждой ситуацией четыре кнопки. После выбора появляется разбор: верно или нет и почему. Внизу подсчёт ответов. Выбор можно менять.
Про разницу начертания у b и strong подробно на странице Тег strong или b . Отдельно про подсветку найденного слова есть страница mark.
Как выглядит b и как изменить стиль
Толщина шрифта задаётся числом от 100 до 900: 400 - обычный шрифт, 700 - полужирный, 900 - самый толстый. У тега b значение bolder, то есть «толще, чем у родителя». Мы проверили в Chromium 141: в обычном абзаце (400) он получает 700, а в заголовке h1, где шрифт уже 700, - 900, то есть толще самого заголовка. В очень лёгком тексте (100-300) он получает только 400 и жирным не выглядит.
Изменить вид можно обычным правилом CSS: сразу для всех тегов b или для класса, если нужны разные роли.
b {
font-weight: 600;
}
b.product {
font-weight: 700;
color: #1f4f99;
}<p>Статья про <b class="keyword">строчные теги</b> и чайник <b class="product">Аква-2</b>.</p>Класс нужен, чтобы отличать ключевые слова от названий и менять вид каждой роли отдельно. MDN советует именно так. Если жирность тегу не нужна совсем, в правиле пишут font-weight: normal, но тогда лучше задуматься, нужен ли тут b.
Атрибуты тега b и правила записи
Собственных атрибутов у b нет, работают только глобальные: class, id, title, lang, style и остальные. Обычно берут class.
Тег парный: закрывающий </b> обязателен, одиночным он не бывает. Внутри допустимы только текст и другие строчные теги, блочные вроде p или div вкладывать нельзя.
<p>Название <b class="product">Аква-2</b>.</p>
<b><p>Так нельзя: абзац внутри b.</p></b>Устарел ли тег b
Нет. В HTML 4 тег означал просто «жирный шрифт» и считался оформлением, поэтому его часто называют устаревшим. В HTML5 ему дали новое значение: внимание без важности. Справочники MDN и Дока при этом советуют брать b, когда ни один другой тег не подходит.
Читают ли b программы чтения с экрана
В Chromium 141 у элемента b нет отдельной роли в структуре доступности, а у strong она есть. Как программы чтения с экрана произносят текст внутри b, мы не проверяли.
Значения у тега нет, поэтому опираться на него нельзя: если отмеченное нужно донести до каждого читателя, берите strong или напишите это словами.
Частые ошибки
Большинство ошибок с этим тегом сводится к одной привычке: считать его просто кнопкой «жирный».
| Ошибка | Что происходит | Как исправить |
|---|---|---|
b вместо strong для предупреждения | Читатель, который не видит жирный шрифт, не получает предупреждения | Использовать strong |
b вместо заголовка | Текст выглядит заголовком, но в структуре страницы им не является. В h1 ещё и толще самого заголовка | Использовать h1-h6 |
b на весь абзац | Когда жирное всё, не выделено ничего | Отмечать ключевые слова, названия или первую фразу |
b ради красоты: плашки, кнопки, подписи | Тег обещает «обратите внимание», а там просто оформление | Класс и CSS |
Не закрыт </b> | Жирным станет и текст следующих абзацев: мы проверили, что браузер продолжает b в них | Всегда закрывать тег |
