Как сделать текст жирным в HTML и CSS: теги b, strong и font-weight

Чтобы сделать текст жирным в HTML, оберните слово в тег <strong>, если оно важно по смыслу, или в <b>, если выделение нужно только для глаза. Браузер нарисует оба одинаково. Заголовки, кнопки и целые блоки удобнее утолщать в CSS: свойство font-weight: 700 или его синоним font-weight: bold.

Дальше по порядку: чем теги отличаются друг от друга, как устроена шкала толщины от 100 до 900, как сделать курсив, подчёркнутый и зачёркнутый текст и почему тег b иногда ничего не выделяет. Если разметку вы видите впервые, сначала прочитайте, что такое HTML и из чего состоит страница. Примеры удобно пробовать в своём файле, а как его завести, рассказано в инструкции про создание index.html.

CheckroiПодборка курсов по HTML208 курсов • 42 школыСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Как сделать текст жирным: три способа

Все три варианта выглядят одинаково. Разница в том, что каждый сообщает браузеру и программам, которые читают страницу вслух.

<p>Доставка <strong>бесплатная</strong> до пятницы.</p>
<p>Ноутбук <b>Луч 14</b> весит 1,2 кг.</p>
<p class="lead">Этот абзац целиком жирный.</p>

Третий абзац получает толщину из таблицы стилей:

.lead {
  font-weight: 700;
}

Когда одно и то же выделение повторяется по всему сайту, заведите для него класс и опишите его в CSS. Так правка толщины займёт одну строку, а не поиск по сотне страниц. Как подключить таблицу стилей, мы показали в статье о трёх способах связать CSS и HTML.

Чем тег b отличается от strong

Внешне ничем. В таблице стилей браузера по умолчанию, которую приводит спецификация HTML, у обоих тегов одно правило: b, strong { font-weight: bolder; }.

Разница в смысле. По стандарту WHATWG strong обозначает важность, серьёзность или срочность. Тег b привлекает внимание без дополнительной важности, и спецификация советует брать его в последнюю очередь, когда другой элемент не подходит.

Там же перечислено, что ставить вместо b:

• заголовок размечают тегами <h1>–<h6>;
• смысловое ударение размечают тегом <em>;
• важное размечают тегом <strong>;
• отмеченный или подсвеченный фрагмент размечают тегом <mark>.

В описании тега b есть и пример ошибки: слово «WARNING!» перед предупреждением размечено тегом b, а правильным там назван strong.

Вложенность тоже работает по-разному. Каждый вложенный strong, по стандарту, повышает важность фрагмента. Двойной b смысла не добавляет, хотя в Chrome 155 оба варианта получают одинаковый вес 900.

Свойство font-weight: толщина шрифта в CSS

Свойство font-weight задаёт толщину начертания. По спецификации CSS Fonts оно принимает число от 1 до 1000 или одно из четырёх слов. Числа обычно соответствуют привычным названиям начертаний. Размер букв задаёт другое свойство, font-size, о нём подробно в статье о кегле.

Слова bolder и lighter считают толщину от родителя, а не от нуля:

h2 { font-weight: 800; }
.price { font-weight: bold; }
.caption { font-weight: 300; }
.caption b { font-weight: bolder; } /* от 300 получится 400 */

Почему 500 и 600 иногда выглядят одинаково

Число в font-weight работает как просьба. Если у шрифта нет нужного начертания, браузер берёт ближайшее по правилам подбора. При весе больше 500 он сначала ищет более жирные начертания, при весе меньше 400 сначала более тонкие.

У Arial на macOS всего два начертания, обычное и жирное. Поэтому значения от 100 до 500 выглядят как 400, а от 600 до 900 как 700. Системный шрифт macOS меняет толщину на каждой ступени.

Тонкая градация видна только у шрифта, где есть нужные начертания. Подключаете шрифт сами? Загрузите те веса, которые указаны в CSS, иначе 600 и 800 сольются с соседями. Шрифты с кириллицей и несколькими весами есть в нашей подборке бесплатных шрифтов.

Курсив, подчёркнутый и зачёркнутый текст

Остальные теги форматирования устроены так же, как b и strong: у каждого есть смысл, а внешний вид задаёт таблица стилей браузера. Все они ставятся внутри строки текста, чаще всего внутри абзаца, который размечают тегом p.

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

Цену, которая больше не действует, размечают тегом s. Для правки текста стандарт предлагает другой тег, <del>.

С подчёркиванием осторожнее. По стандарту, в большинстве случаев уместнее другой тег: em для ударения, b или mark для ключевых слов, cite для названий книг. К тому же в стилях браузера по умолчанию подчёркнуты ссылки, и читатель легко примет подчёркнутое слово за ссылку.

Жирный курсив

Теги можно вкладывать друг в друга. Порядок на вид не влияет: <b><i> и <i><b> дают одинаковый жирный курсив.

<p>Срок оплаты <strong><em>до 25 числа</em></strong>.</p>

В CSS то же самое делают двумя свойствами:

.deadline {
  font-weight: 700;
  font-style: italic;
}

Отдельно выделять жирным заголовки столбцов не нужно: ячейка <th> по умолчанию уже жирная, это правило th { font-weight: bold; } из той же таблицы стилей браузера. Как устроены строки и ячейки, рассказано в статье про таблицы в HTML.

Подчёркивание и зачёркивание в CSS

Линию задаёт свойство text-decoration: значение underline подчёркивает текст, line-through зачёркивает. Вид линии меняют значениями solid, double, dotted, dashed и wavy.

У ссылок подчёркивание стоит по умолчанию, и его тоже снимают или меняют через text-decoration. Про сами ссылки и их атрибуты мы писали в разборе что такое гиперссылка.

.typo { text-decoration: underline wavy red; }
.old-price { text-decoration: line-through; }

Жирный текст там, где HTML не работает

В описание профиля, комментарий или ник тег не вставишь. Для таких мест есть генераторы «жирного шрифта». Они подменяют обычные буквы символами из блока Unicode «Mathematical Alphanumeric Symbols», то есть математическими буквами, нарисованными жирно.

• В блоке есть латиница, греческий алфавит и цифры, а русских букв нет (таблица блока). Кириллицу генератор либо оставит обычной, либо заменит похожими латинскими буквами.
• Стандарт Unicode предназначает эти символы только для математической и технической записи и не рекомендует оформлять ими обычный текст.

На своём сайте такие символы не нужны: там работают теги и CSS. Как оформить подпись в соцсети, мы разобрали в статье про красивые шрифты для соцсетей.

Частые ошибки и что с ними делать

Тег b ничего не выделил

Так бывает внутри тонкого текста. Тег b по умолчанию получает bolder, а таблица относительных весов переводит родительские 300 и меньше в 400. Слово становится обычным, а не жирным.

Решение: задайте тегу явный вес, например b, strong { font-weight: 700; }, или утолщайте текст классом.

Тег b внутри заголовка не заметен

Заголовок уже жирный, 700. Вложенный b по той же таблице просит 900, и если у шрифта такого начертания нет, разницы не видно.

Решение: выделяйте часть заголовка цветом или отдельным span со своим весом. А сам заголовок размечайте тегами h1–h6, не тегом b.

Веб-шрифт «жирнеет» криво или не жирнеет совсем

Шрифт подключён только в обычном начертании. Тогда браузер дорисовывает жирность сам. Буквы толстеют, но выходят уже настоящего жирного начертания. Это разрешает свойство font-synthesis-weight, а со значением none жирность пропадает вовсе.

Решение: подключите файл жирного начертания и объявите его в @font-face с font-weight: 700.

В коде остался тег font

Тег <font> из старых сайтов браузер до сих пор красит, но в стандарте он в списке устаревших элементов, которые авторы использовать не должны.

Решение: перенесите цвет, размер и толщину в CSS.

Жирным выделено полабзаца

Выделение работает, пока его мало. Если жирным набрана треть текста, глаз перестаёт отличать важное от остального.

Решение: оставьте одно выделение на абзац, а длинную важную мысль вынесите в отдельный абзац или список.

Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в канал→

Где освоить HTML и CSS системно

Жирный текст делается за минуту, а чувство, где нужен тег, а где стиль, приходит с практикой на настоящих макетах. Если вёрстка интересна как работа, посмотрите, чем занимается HTML-верстальщик, и план входа во фронтенд. Оформление текста подробно разбирают на курсах по CSS, а ниже собраны программы по HTML с ценами и отзывами.

Курс	Школа	Стоимость со скидкой	В рассрочку	Длитель­ность	Обзор курса от Checkroi
HTML и CSS с нуля Перейти на сайт курса	Skillbox	91 626 ₽	7635 ₽/мес.	11 месяцев	Обзор курса
HTML и CSS. Адаптивная вёрстка и автоматизация Перейти на сайт курса	HTML Academy	23 400 ₽	3900 ₽/мес.	2 месяца	Обзор курса
Основы вёрстки HTML и CSS Перейти на сайт курса	Академия Синергия	32 676 ₽	2723 ₽/мес.	3 месяца	Обзор курса
HTML и CSS с нуля	Skypro	195 160 ₽	7972 ₽/мес.	12 месяцев	Обзор курса
Онлайн-курс Вёрстка на HTML и CSS Перейти на сайт курса	Бруноям	29 900 ₽	2491 ₽/мес.	3 месяца	Обзор курса

• 

  HTML и CSS с нуля

  Skillbox91 626 ₽7635 ₽/мес11 месяцев
  Перейти на сайт курсаОбзор
• 

  HTML и CSS. Адаптивная вёрстка и автоматизация

  HTML Academy23 400 ₽3900 ₽/мес2 месяца
  Перейти на сайт курсаОбзор
• 

  Основы вёрстки HTML и CSS

  Академия Синергия32 676 ₽2723 ₽/мес3 месяца
  Перейти на сайт курсаОбзор
• 

  HTML и CSS с нуля

  Skypro195 160 ₽7972 ₽/мес12 месяцев
  Обзор
• 

  Онлайн-курс Вёрстка на HTML и CSS

  Бруноям29 900 ₽2491 ₽/мес3 месяца
  Перейти на сайт курсаОбзор

Больше программ — в полном каталоге курсов по HTML