Жирный шрифт в HTML: как использовать тег <​b​> правильно
2026-02-21 12:14 Diff
https://skillbox.ru/media/base/zhirnyy-shrift-v-html-kak-ispolzovat-teg-b-pravilno/

#База знаний

  • 10 июн 2025
  • 0

Разбираемся, как работает этот тег, когда его стоит применять и почему иногда лучше выбрать другой способ.

Иллюстрация: Polina Vari для Skillbox Media

Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.

Тег <b> (от англ. bold — «жирный») используется в HTML для визуального выделения текста жирным начертанием. Он не добавляет тексту дополнительный смысл, а лишь акцентирует внимание читателя на контенте. В этой статье мы разберём, как работает этот тег и чем он отличается от других способов выделения.

Содержание

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

Тегом <b>, можно выделить, например:

  • название товара или бренда;
  • текст на кнопке;
  • первые слова в пунктах списка, чтобы визуально отделить их друг от друга.
<p>Это обычный текст, а <b>это жирный шрифт</b>.</p

На странице выделится только фраза «это жирный шрифт».

Тег <b> — парный, то есть его нужно открыть (<b>) и потом закрыть (</b>). Всё, что находится внутри, будет отображаться в жирном начертании.

<p>Для запуска программы нажмите <b>Старт</b>.</p>

Браузер изменяет выделенный таким образом текст, применяя стиль font-weight: bold.

У тега нет своих уникальных атрибутов, но он поддерживает общие HTML-атрибуты:

  • class — для подключения CSS-стилей;
  • id — для уникальной идентификации;
  • style — для быстрой настройки внешнего вида;
  • title — всплывающая подсказка.
<b class="highlight" title="Важная информация">Обратите внимание!</b>

Что здесь происходит:

  • class="highlight» — подключает CSS-класс с именем highlight, с помощью которого можно задать стили (например, цвет, отступы и так далее) в CSS-файле;
  • title="Важная информация» — если навести курсор мыши на текст, появится всплывающая подсказка с этой фразой.

<strong> — похожий тег для выделения текста. Оба тега делают шрифт жирным, но работают по-разному:

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

Внешне результат работы этих тегов выглядит абсолютно одинаково:

Скриншот: Google Chrome / Skillbox Media

Поисковые системы игнорируют тег <b>, потому что он не имеет смысла, то есть этот тег никак не влияет на SEO.

Сам по себе тег <b> не помогает и создать доступную среду для людей с нарушениями зрения, но его можно использовать вместе с ARIA-атрибутами. Тогда текст начнёт взаимодействовать со скринридерами.

ARIA-атрибуты помогают объяснить смысл текста программам для чтения с экрана. Это важно, если вы используете <b> и хотите, чтобы выделение было понято правильно.

Атрибут aria-label задаёт текстовую подсказку, которую скринридеры озвучивают вместе с содержимым элемента.

<p>Скорость автомобиля: <b aria-label="критически высокая"> — 200 км/ч</b></p>

Скринридер озвучит:

«Скорость автомобиля критически высокая — 200 километров в час».

Атрибут aria-hidden поможет спрятать текст от скринридеров:

<p>Это <b aria-hidden="true">важное</b> сообщение.</p>

Скринридер прочитает только: «Это сообщение» — слово «важное» будет пропущено, но визуально останется на экране.

Если вам нужно просто выделить текст жирным, необязательно использовать тег <b>. Можно сделать то же самое с помощью CSS — языка, который управляет внешним видом страницы.

<p>Это <span class="highlight">выделенный</span> текст.</p> .highlight { font-weight: 700; }

Здесь шрифт у выделенной фразы внутри тега <span> будет жирным, потому что мы задали стиль font-weight: 700 — то есть указали толщину шрифта 700. Лучше использовать числовое значение, а не значение bold, потому что современные шрифты поддерживают разные толщины:

НазваниеТолщинаThin / Hair100Extra Light200Light300Regular400Medium500Semi Bold600Bold700Extra Bold800Black / Heavy / Ultra900

Используя числа, вы точно настраиваете внешний вид текста. Это важно, если у вас есть дизайн-макет или нужен единый стиль.

У стилей есть несколько преимуществ перед тегом <b>:

  • Можно управлять стилем в одном месте — меняете стиль в CSS, и он применяется ко всем нужным элементам.
  • Легко использовать разные типы выделения — жирный (font-weight), цветной (color), подчёркнутый (text-decoration) и другие.
  • Код становится чище — структура (HTML) и оформление (CSS) разделены.

Зато тег <b> можно использовать:

  • для быстрого выделения текста в небольшом фрагменте;
  • если нет доступа к CSS (например, в CMS или конструкторе сайтов);
  • в учебных примерах или черновиках.
Научитесь: Профессия Фронтенд-разработчик + ИИ Узнать больше