Исполняемые доки HTML: Жирный и курсив

Q: Как сделать текст жирным в HTML?

Оберните его в , если слова важны ( Warning: ), или в , если нужно только выделить их без дополнительной важности, например название товара. Оба тега по умолчанию показывают текст жирным.

Q: Чем отличается от ?

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

Q: Как сделать текст курсивом в HTML?

Используйте для смыслового ударения, которое меняет смысл предложения («Я это сказал» с ударением на «я»), и для текста другим голосом: иностранные слова, термины, названия кораблей, мысли. Оба тега показывают текст курсивом.

Q: Как сделать текст одновременно жирным и курсивным?

Вложите теги друг в друга: text . Закрывайте их в порядке, обратном открытию. В CSS задайте одному элементу и font-weight: bold, и font-style: italic.

Q: Можно ли сделать текст жирным через CSS?

Да: font-weight: bold (или 700) у любого элемента. Используйте CSS, когда жирный шрифт нужен только для вида, например подпись кнопки или стиль заголовка таблицы, а теги HTML, когда сами слова важны или выделены по смыслу.

Жирный текст и курсив в HTML: теги strong, b, em и i

Жирный текст в HTML делают через или , курсив через или . Разберем, какой тег когда использовать, как совместить жирный и курсив и как сделать текст жирным или курсивным через CSS.

На этой странице есть исполняемые редакторы: меняйте, запускайте и сразу видите результат.

Автор Kevin Spektor, Co-founder & CTO

Опубликовано Sep 24, 2026

Как сделать жирный текст в HTML

Оберните текст в  или . Оба тега делают его жирным:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bold</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
  </style>
</head>
<body>
  <p><strong>Warning:</strong> unplug the device before opening it.</p>
  <p>The <b>Pro</b> plan includes offline mode.</p>
</body>
</html>

Выглядят они одинаково. Разница в том, что они говорят о тексте.

strong или b

Тег	Смысл	Пример
`<strong>`	Важное, серьезное или срочное содержимое	`<strong>Do not</strong> share your password.`
`<b>`	Выделяется, но без дополнительной важности	Ключевые слова в кратком изложении, название товара, первые слова статьи

Выбирайте , когда вы повысили бы голос или хотите, чтобы читатель точно это заметил. Выбирайте , когда жирный шрифт это визуальная условность для такого текста. Если не подходит ни то, ни другое и нужен просто стиль, используйте  с классом и CSS.

Курсив: em и i

Пара для курсива устроена так же:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Italics</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
  </style>
</head>
<body>
  <p>I <em>never</em> said she took the money.</p>
  <p>I never said <em>she</em> took the money.</p>
  <p>The word <i lang="fr">déjà vu</i> comes from French, and the ship was the <i>Endurance</i>.</p>
</body>
</html>

Тег	Смысл	Пример
`<em>`	Смысловое ударение: если его перенести, смысл предложения меняется	`I <em>never</em> said that.`
`<i>`	Другой голос: иностранные слова, термины, названия кораблей, мысли	`<i lang="la">et cetera</i>`

Первые два предложения выше состоят из одних и тех же слов, но значат разное из-за того, где стоит . Когда  выделяет фразу на другом языке, добавьте атрибут lang, чтобы программы чтения с экрана правильно ее произносили.

Еще несколько тегов по умолчанию выводятся курсивом: <cite> (название произведения), <dfn> (определяемый термин), <address> и <var>. Используйте их, когда они подходят, и пусть их стиль по умолчанию сделает остальное.

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

Вложите один тег в другой и закройте их в обратном порядке:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bold italic</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
  </style>
</head>
<body>
  <p><strong><em>Bold and italic</em></strong></p>
  <p><em>Italic with a <strong>bold</strong> word inside</em></p>
  <p><b><i>b and i together</i></b></p>
</body>
</html>

text (закрытие в неправильном порядке) все равно отображается, но браузеру приходится чинить дерево, и он может разбить ваши элементы; как выглядит такое исправление, показано на странице про теги.

Жирный и курсив через CSS

Когда стиль нужен только для вида (заголовок карточки, цена, подпись), задайте CSS самому элементу, а не добавляйте тег. font-weight управляет жирностью, а font-style курсивом:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS bold and italic</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .price { font-weight: bold; color: #16a34a; }
    .semi { font-weight: 600; }
    .note { font-style: italic; color: #4b5563; }
    .calm strong { font-weight: normal; color: #dc2626; }
  </style>
</head>
<body>
  <p>Price: <span class="price">$12</span></p>
  <p class="semi">font-weight: 600</p>
  <p class="note">A note set in italics with font-style.</p>
  <p class="calm"><strong>Still strong</strong>, shown in red instead of bold.</p>
</body>
</html>

Последняя строка показывает, что смысл и вид независимы:  сохраняет свой смысл, а CSS оформляет его по-другому. Весь диапазон насыщенности (от 100 до 900) описан на странице CSS font-weight.

Доступность

Большинство программ чтения с экрана при стандартных настройках не меняют голос для  или , поэтому жирный шрифт и курсив это в основном визуальные подсказки. Все, что пользователь не должен пропустить (ошибка, обязательное поле, срок), должно быть понятно из самих слов, а не только из стиля. Также избегайте длинных фрагментов курсивом или жирным: их труднее читать, особенно людям с дислексией.

Частые ошибки

Жирный текст вместо заголовка. Строка  над разделом не является заголовком для программ чтения с экрана. Используйте <h2> или <h3> и оформите его.
 ради стиля. Если в тексте нет ничего важного, используйте  или CSS.
Жирный абзац целиком. Выделение работает, когда оно редкое. Выделяйте одну фразу, а не весь абзац.
Закрытие тегов в неправильном порядке. x, а не x.
Устаревшие теги. Тег  из старых учебников устарел. Используйте теги выше или font-weight.

Часто задаваемые вопросы

Как сделать текст жирным в HTML?

Оберните его в , если слова важны (Warning:), или в , если нужно только выделить их без дополнительной важности, например название товара. Оба тега по умолчанию показывают текст жирным.

Чем отличается от ?

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

Как сделать текст курсивом в HTML?

Используйте  для смыслового ударения, которое меняет смысл предложения («Я это сказал» с ударением на «я»), и  для текста другим голосом: иностранные слова, термины, названия кораблей, мысли. Оба тега показывают текст курсивом.

Как сделать текст одновременно жирным и курсивным?

Вложите теги друг в друга: text. Закрывайте их в порядке, обратном открытию. В CSS задайте одному элементу и font-weight: bold, и font-style: italic.

Можно ли сделать текст жирным через CSS?

Да: font-weight: bold (или 700) у любого элемента. Используйте CSS, когда жирный шрифт нужен только для вида, например подпись кнопки или стиль заголовка таблицы, а теги HTML, когда сами слова важны или выделены по смыслу.

Связанные концепции