Жирный шрифт в HTML: как использовать тег <​b​> правильно

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

Содержание

• Как работает тег <b> и зачем он нужен
• Как правильно писать и использовать тег <b> в HTML-документе
• Тег <b> и тег <strong>: в чем разница
• Как тег <b> влияет на доступность и SEO
• Применение стилей вместо тега <b>

Как работает тег <b> и зачем он нужен

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

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

• название товара или бренда;
• текст на кнопке;
• первые слова в пунктах списка, чтобы визуально отделить их друг от друга.

<p>Это обычный текст, а <b>это жирный шрифт</b>.</p

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

Как правильно писать и использовать тег <b> в HTML-документе

Тег <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="Важная информация» — если навести курсор мыши на текст, появится всплывающая подсказка с этой фразой.

Тег <b> и тег <strong>: в чем разница

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

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

<p>Этот текст <b>просто жирный</b>, а этот <strong>важный</strong>.</p>

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

Как тег <b> влияет на доступность и SEO

Поисковые системы игнорируют тег <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>

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

<p>Это <span class="highlight">выделенный</span> текст.</p>

.highlight {
  font-weight: 700;
}

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

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

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

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

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

• для быстрого выделения текста в небольшом фрагменте;
• если нет доступа к CSS (например, в CMS или конструкторе сайтов);
• в учебных примерах или черновиках.

Полезные ссылки

• MDN: Тег <b>
• MDN: Тег <strong>